第一章，jQuery基础
一，jQuery简介
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
- jQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
二，选择器
-
什么是jQuery选择器
- jQuery选择器是jQuery库中用于选择和操作HTML元素的功能。通过选择器，你可以轻松地找到文档中的指定元素，并对其进行操作，比如添加样式、修改内容、绑定事件等。
-
jQuery选择器的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
-
jQuery选择器的类型
三，jQuery选取元素
-
通过CSS选择器选取元素
-
基本选择器
1、标签选择器： 语法：$ (“标签名”)
2、id选择器： 语法：$ (“#id的属性值”)
3、类选择器：语法：$ (“.class的属性值”)
4、并集选择器：语法：$ (“选择器1,选择器2…”)
$(function(){ //标签选择器 //标签选择器又称元素选择器，用于获得所有匹配标签元素名称的元素 $('div').css('backgroundColor','yellow') //id选择器:获得与指定id属性值匹配的元素 //例如：元素id为container $('#container').css('backgroundColor','yellow') //类选择器:获得与指定class属性值匹配的元素 //例如：元素class为container $('.container').css('backgroundColor','yellow') //并集选择器:获取多个选择器选中的所有元素 //例如：选中所有div和所有id为container的的元素 $('div #container').css('backgroundColor','yellow') })-
层次选择器
1、后代选择器：语法：$ (“A B”)
2、子选择器：语法：$ (“A>B”)
$(function(){ //后代选择器:选择A元素内部的所有B元素 //例如：选择div元素内部的所有span元素 $('div span').css('backgroundColor','yellow') //子选择器:选择A元素下一级的B元素 //例如：选择div元素内部的直系span元素 $('div>span').css('backgroundColor','yellow') })-
属性选择器
在这里插入图片描述
1、属性名称选择器：语法：$ (“A [属性名]”)
2、属性选择器：语法：$ (“A [属性名=‘值’]”)
3、复合属性选择器：语法：$ (“A[属性名=‘值’][ ]…”)
$(function(){ //属性名称选择器：包含指定属性的选择器 //例如：选择包含有属性class的div $("div[class]").css('backgroundColor','yellow') //属性选择器：包含指定属性等于指定值的选择器 //例如：选择属性class等于container的div $("div[class='container']").css('backgroundColor','yellow') //复合属性选择器：包含多个属性条件的选择器 //例如：选择包含有属性id并且属性class等于container的div $("div[id][class='container']").css('backgroundColor','yellow') })- 拓展：属性选择器与正则表达式
&(function(){ //“^=”:指定属性名称是以指定值开头的选择器 //例如：选择class属性以con开头的div $("div[class^='con']").css('backgroundColor','yellow') //“$=”:指定属性名称是以指定值结尾的选择器 //例如：选择class属性以er结尾的div $("div[class$='er']").css('backgroundColor','yellow') //“*=”：指定属性名称中包含指定值的选择器 //例如：选择class属性中含有tain的div $("div[class*='tain']").css('backgroundColor','yellow') }) -
-
通过条件过滤选取元素
-
基本过滤选择器
1、首元素选择器：语法：$ (“A:first”)
2、尾元素选择器：语法：$ (“A:last”)
3、非元素选择器：语法：$ (“A:not(selector)”)
4、偶数选择器：语法：$ (“A:even”)
5、奇数选择器：语法：$ (“A:odd”)
6、等于索引选择器：语法：$ (“A:eq(index)”)
7、大于索引选择器 ：语法：$ (“A:gt(index)”)
8、小于索引选择器：语法：$ (“A:lt(index)”)
9、标题选择器：语法：$(“:header”)
$(function(){ //首元素选择器：获得选择的元素的第一个元素 //例如：选择列表的第一个li $("li:first").css('backgroundColor','yellow') //尾元素选择器：获得选择的元素的最后一个元素 //例如：选择列表的最后一个li $("li:last").css('backgroundColor','yellow') //非元素选择器:不包括指定内容的元素 //例如选择除class为container外的所有div $("div:not(.container)").css('backgroundColor','yellow') //偶数选择器:从0开始计数，获得选择的元素中索引为偶数的元素 //例如：选择列表的偶数项li $("li:even").css('backgroundColor','yellow') //奇数选择器:从0开始计数，获得选择的元素中索引为奇数的元素 //例如：选择列表的奇数项li $("li:odd").css('backgroundColor','yellow') //等于索引选择器:获得选择的元素中指定索引的元素 //例如：选择列表索引为2的li $("li:eq(2)").css('backgroundColor','yellow') //大于索引选择器：获得选择的元素中大于指定索引的元素 //例如：选择列表索引大于2的li $("li:gt(2)").css('backgroundColor','yellow') //小于索引选择器：获得选择的元素中小于指定索引的元素 //例如：选择列表索引小于2的li $("li:lt(2)").css('backgroundColor','yellow') //标题选择器:获得标题（h1~h6）元素，固定写法：$(":header") //选择所有的标题元素 $(":header").css('backgroundColor','yellow') })-
可见性过滤选择器
1、可用元素选择器：语法：$ (“A:enabled”)
2、不可用元素选择器：语法： $ (“A:disabled”)
3、选中选择器(单/复选框)：语法：$ (“A:checked”)
4、选中选择器（下拉框）语法：$ (“A:selected”)
$(function(){ //可用元素选择器:获得选择元素中的可用元素 //例如：改变表单内可用 input 元素的值 $("input[type='text']:enabled").val("aaa"); //不可用元素选择器：获得选择元素中的不可用元素 //例如：改变表单内不可用 input 元素的值 $("input[type='text']:disabled").val("aaa"); //选中选择器：获得单选/复选框选中的元素 //例如：获得选中的复选框的个数 $("input[type='checkbox']:checked").length; //选中选择器：获得下拉框选中的元素 //例如：获得下拉框选中的个数 $("#obj>option:selected").length; })- $ (“A:checked”)和$ (“A:selected”)的区别
- $ (“A:checked”)选择器的作用对象是单选/复选框，而$ (“A:selected”)选择器的作用对象是下拉框；$ (“A:selected”)的作用对象是下拉框中包含在内的选项，所以在使用的时候，因此在使用时应当使用“>”来具体说明
-
四，jQuery选择器的注意事项
- 特殊符号转义
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
//获取这两个选择器
//错误示范
$("#id#a");
$("#id[2]");
//正确示范
$("#id\\#a");
$("#id\\[2\\]");
- 选择器中的空格
- 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
//选取class为“test”的元素内部的隐藏元素
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器
扫一扫
5283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
