Jquery基础选择器及核心函数

Jquery

Jquery介绍

​ Jquery是一款快速、简洁的JavaScript框架。Jquery设计宗旨为“Write less Do More！” 用最少的代码完成最多的事情。他封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

我们使用Jquery可以更好的完成一下操作：

1. Html文档操作，对于Dom相关操作优化
2. Jquery提供更加方便与丰富的事件处理
3. Jquery提供简单的动画特效
4. Jquery提供Ajax交互

使用任何一个JS框架，都要导入相关jar包

Jquery的插件机制非常丰富，在开发中能选择非常多的相关插件。例如：表单校验插件，树形结构···

---

Jquery快速入门

PC端开发，一般使用Jquery1.X版本。因为后续更新 2.X的版本对浏览器的支持不好。

开发中，我们导入min.js文件，在学习阶段导入Jquery.js文件

---

完成操作：页面加载完成后，弹出一个框，显示Hello，Jquery！

HelloJquery代码

//第一步： 导入JS文件
    
    <script src="web/JS/jquery.js"></script>
    
//第二步：完成操作（页面加载完成后，弹出一个框，显示Hello，Jquery！）
    <script >
       $(function () {
            alert("hello Jquery");
        });
    </script>

---

Jqery的核心函数

• Jquery（CallBack）
  • 他是$(Document).ready的简写。
  • $(Document).ready（function（）{}） 页面加载完成后，完成指定函数的执行
  • 简写方式
    • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIb3bJWg-1594088466450)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200704101012707.png)]

---

• Jquery(html , [ ownerDocument ] )
• 将一个dom对象包装成一个Jquery对象。从而可以使其调用Jquery的相关方法和属性

---

• Jquery（ [ selector ， [Context ] ] ）
• 这个函数我们使用它们的主要作用是：在页面上进行查找，根据CSS选择器。
• selector：css选择器。Jquery中提供了九种选择器
• Context：就是指定要查找的dom集
• 即：从Context指定值中查找selector指定值

---

• 关于Jquery对象转换为dom对象
• dom —> Jquery $( dom )
• Jquery —>dom Jquery对象.get(0) 或者Jquery对象[0]

---

Jquery选择器

1. 基本选择器

   1. #id ： 根据ID属性来查找元素
   2. Element：元素的标签名称来查找元素
   3. .class ：根据元素的class属性来查找元素
   4. “ * ”： 匹配所有元素
   5. Selector，Selector2 ··· SelectorN ：将每一个选择器匹配到元素合并后，一起返回

2. 层级选择器 (根据元素的广西来获取。关系指的是父子关系，兄弟关系)

   1. 空格 ：得到元素下的所有子元素（直接子元素、间接子元素）
   2. 大于号 ： 直接获取子元素
   3. 加号： 只获取直接的一个兄弟元素
   4. 波浪线 ：获取所有的后边的所有兄弟元素

   1.获取ID为d的所有<a>子元素
    	$("#d a")
   2.获取ID为d的直接<a>子元素
   	$("#d > a")
   3.获取ID为d的第一个兄弟<p>元素
   	$("#d + p")
   4.获取ID为d的所有兄弟<p>元素
   	$("#d ~ p")
   5.将id为d下的所有子元素<a>的内容变为红色(单一属性变化)
   	$("#d > a").css("color","red");
   6.将id为d下的所有子元素<a>的内容变为红色,背景色变为蓝色(多属性变化)
   	$("#d > a").css({"color":"red"},{"background":"blue"});
   

3. 过滤选择器（过滤器） 基本都是冒号开头，除了属性过滤选择器

   1. 基本过滤选择器

   2. 内容过滤[ 标签：has（标签） ， 标签：parent（子元素）··· ][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-twlOXJ5y-1594088466459)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200705093622511.png)]

   3. 可见性过滤：匹配Display：none 或表单中Input：hidden这样的元素。[ 标签 ：可见性（hidden，visible） ][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDL61WK8-1594088466467)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200706104726177.png)]

      常用方法：
      1.把隐藏的显示出来    show()   
      2.把显示的隐藏起来    hide()
      3.获取当前元素值      val()
      

   4. 属性过滤

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3HRa0rnH-1594088466470)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200706105946840.png)]

      常用方法：
      1.设置或返回属性值   attr();
      

   5. 子元素过滤：根据子元素顺序来获取[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZwOf5TE-1594088466478)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200706111407055.png)]

      1.nth - child 根据序号/奇偶来获取
      2.first-child  获取第一个
      3.last - child  获取最后一个
      4.only-child   获取父下只有一个子元素的
      

   6. 表单过滤：选取表单内的元素

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L5nLmyPx-1594088466482)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200706112356745.png)]

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3U448mQt-1594088466484)(C:/Users/aaa/AppData/Roaming/Typora/typora-user-images/image-20200706112653907.png)]

      常用事件处理：
      1.失去焦点          blur（function(){}）
      2.去掉字符串的空格   trim()
      3.点击事件          click(function(){})
      4.表单提交          submit()
      

   7. 表单对象过滤

Jquery中的方法总结小块：
1. html()：无参数代表获取元素中的html代码，有参数代表设置元素的html信息
2. text()：无参数代表获取元素中的文本信息，有参数代表设置元素的文本信息
3. each()：遍历元素，传递一个函数each（function（n）），n代表每个元素的序号，在函数中可以用
			this来获取其dom对象。
4. index()：判断元素的序号
5. size()：判断Jquery对象的大小

素的html信息
2. text()：无参数代表获取元素中的文本信息，有参数代表设置元素的文本信息
3. each()：遍历元素，传递一个函数each（function（n）），n代表每个元素的序号，在函数中可以用
this来获取其dom对象。
4. index()：判断元素的序号
5. size()：判断Jquery对象的大小