From de4aa4069f0ac979d5118352a3d8672418488507 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B6=9B?= <3014619898@qq.com> Date: Mon, 21 Nov 2022 16:09:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9D=8E=E6=B6=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../1121JQuery\345\237\272\347\241\200.md" | 262 ++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 "45\346\235\216\346\266\233/\347\254\224\350\256\260/1121JQuery\345\237\272\347\241\200.md" diff --git "a/45\346\235\216\346\266\233/\347\254\224\350\256\260/1121JQuery\345\237\272\347\241\200.md" "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1121JQuery\345\237\272\347\241\200.md" new file mode 100644 index 0000000..b6f1dd1 --- /dev/null +++ "b/45\346\235\216\346\266\233/\347\254\224\350\256\260/1121JQuery\345\237\272\347\241\200.md" @@ -0,0 +1,262 @@ + + +# JQuery基础 + +### JQuery对象 + +#### 1.引入 + +##### 首先 在引入JQuery中 ，想要使用JQuery所闭包的方法 + +```javascript +$ <===> JQuery +``` + +##### 推荐的 JQuery 字节跳动 + +```javascript + +``` + + + +##### 1.2JQuery定义全局变量 + +```javascript +window.JQuery = window.& = JQuery; +``` + +所以想要实现JQuery框架只有两种方式，一种是通过$,一种是通过JQuery。 + + + +#### 2.Dom与JQuery包装集对象 + +##### Dom对象 + +```javascript +var div =document.getElementsXXX(xxx) +console.dir(div) +``` + +##### JQuery对象 + +```javascript +var div = $('div'); +``` + +##### Dom对象转成JQuery对象 + +```javascript +console.log($(div)); +``` + +##### JQuery转成Dom + +```javascript +var divs = $('div')[0] +console.log(divs); +``` + +#### 3.选择器 + +##### 3.1标签选择器 + +```javascript +$('标签名'); + +var btn = $('button'); +console.log(btn); +``` + +例题 + +将div的字体颜色更改 + +```javascript + + + + + + + + + + + +
前端jQuery
+

前端jQuery

+ 前端jQuery +
前端jQuery
+ + + +``` + +##### 3.2基础选择器 + +| 选择器 | 名称 | 举例 | +| -------------- | ------------------------------- | ------------------------------------------------- | +| ID选择器 | #ID | $('#testdiv'):选择ID为testdiv的元素 | +| 元素名称选择器 | element | $('div'):选择所有div元素 | +| 类选择器 | .class | $('.bule'):选择所有class=bule的元素 | +| 选择所有元素 | * | $('*'):选择页面所有元素 | +| 群组选择器 | selector1，selector2，selector3 | $(testdiv,span,blue):同时选择多个选择器匹配的元素 | + +**id选择器** + +```javascript +DOM +var btn =document.getElementById('#btn') + +JQuery +var btn =$('#btn'); +``` + +**类选择器** + +```javascript +var btn =$('.btn') +``` + +**所有元素选择器** + +```javascript +console.log($('*')) +``` + +**群组选择器** + +```javascript +console.log($('div,#id,.class')) +``` + + + +#### 3.3层次选择器 + +| 选择器 | 符号 | 举例 | +| ---------- | ----------- | ------------------------------------------------ | +| 后代选择器 | ‘ ’（空格） | $('#parent div'):选择id为parent元素的所有div元素 | +| 子代选择器 | > | $('#parent>div'):选择id为parent的直接div子元素 | +| 相邻选择器 | + | $('.bule+img'):选择css类为blue的下一个img元素 | +| 同辈选择器 | ~ | $('.blue ~ img'):选择css类为blue的之后的img元素 | + + + +#### 3.4属性选择器 + +| **选择器** | 说明 | +| ------------------ | ------------------------------------------------------------ | +| E[attr] | 选择元素E，其中E元素必须带有attr属性 | +| E[attr = “value”] | 选择元素E，其中E元素的attr属性取值是value | +| E[attr!= “value”] | 选择元素E，其中E元素的attr属性取值不是value | +| E[attr ^= “value”] | 选择元素E，其中E元素的attr属性取值是以“value”开头的任何字符 | +| E[attr $=“value”] | 选择元素E，其中E元素的attr属性取值是以“value”结尾的任何字符 | +| E[attr *= “value”] | 选择元素E，其中E元素的attr属性取值是包含“value”的任何字符 | +| E[attr\|="value"] | 选择元素E，其中E元素的attr属性取值等于“value”或者以“value”开头 | +| E[attr ~= “value”] | 选择元素E，其中E元素的attr属性取值等于“value”或者包含“value” | + + + +例题：将class=se开头的文本颜色设置红色 + +```javascript + + + + + + +``` + + + +#### 3.5表单选择器 + +| 选择器材 | 描述 | 返回 | 示例 | +| --------- | ------------------------------------------------------------ | -------- | ------------------------------ | +| :input | 选取所有的，