一、简介
1.下载 2.导入
二、入门
1.jQuery对象 2.jQuery对象与js对象相互转换 3.页面载入
三、选择器
1.基本选择器 2.层级选择器 3.基本筛选器 4.子元素选择器 5.属性过滤器 6.表单选择器 7.表单属性过滤器
一、简介
1.下载
官网:https://jquery.com/
下载:https://jquery.com/download/
生产版与开发版的区别:
一般文件名中带有 min 或 production 的为生产版,为产品上线运行时使用版本;文件名中不带 min 或带有 development 的为开发版,为开发人员编写代码时使用的版本。两者的区别是,前者去掉了代码中无用的换行和空格,压缩了大小。
2.导入
离线版:<script src="js/jquery-3.4.1.js"></script>
(需下载js文件)
在线版(CDN):<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
(无需下载js文件,但使用时需联网)
二、入门
1.jQuery对象
JQuery本质上也是JS,是对JS的封装。在使用JQuery的时候要注意JS对象的属性跟方法要用在JS对象上,JQuery的属性跟方法要用在JQuery对象上。
声明jQuery对象:var $obj ; // 一般用$开头
使用jQuery:
$(selector).action([参数])
//selector为选择器
//action为JQuery对象的方法
$('#my_div').text();
2.jQuery对象与js对象相互转换
JQuery对象全部是数组。
jQuery对象转js对象:
var obj = $('#my_div')[0]; // 方式1 ,[0]为索引
var obj2 = $('#my_div').get(0); // 方式2,(0)为索引
js对象转jQuery对象:
var obj = document.getElementById("my_div");//js对象
var $obj = $(obj);
3.页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。相当于js中的onLoad。jQuery是通过ready(fn)实现。
我们一般简写成这样:
$(function() {
// 在这里写你的代码...
});
三、选择器
1.基本选择器(重要)
代码 | 选择器 |
---|---|
$("#id"); | id选择器 |
$(“h1”); | 元素选择器 |
$(".class"); | 类选择器 |
$("*"); | 通配符选择器 |
$("#id,span,div"); | 群组选择器 |
2.层级选择器(重要)
代码 | 选择器 |
---|---|
$(“div b”); | 后代选择器(选择div元素内部所有的b元素) |
$(“div>b”); | 子选择器(选择div元素内部所有的b直接子元素) |
$(“div+b”); | 下个兄弟选择器(选择紧接div后面的b元素) |
$(“div~b”); | 后面兄弟选择器(选择在div后的所有b元素) |
3.基本筛选器
代码 | 选择器 |
---|---|
$(“h1:first”); | 获取第一个h1元素 |
$(“li:last”); | 获取匹配的最后一个元素 |
$(“h1:not(#my_h1)”); | 获取除了id为my_h1外的所有h1元素 |
$(“tr:odd”); | 获取所有索引值为奇数的元素(索引从0开始) |
$(“tr:eq(1)”); | 获取给定索引值的元素 |
$(“tr:gt(0)”); | 获取所有大于给定索引值的元素 |
$(“tr:lt(2)”); | 获取所有小于给定索引值的元素 |
4.子元素选择器
代码 | 选择器 |
---|---|
$(“ul li:first-child”); | 匹配所给选择器的第一个子元素 |
$(“ul li:last-child”); | 匹配所给选择器的最后一个子元素 |
$(“ul li:nth-child()”); | 匹配所给选择器的特定个子元素 |
类似的 :first 匹配第一个元素,但是 :first-child 选择器可以匹配多个:即为每个父级元素匹配第一个子元素。
nth-child()拓展:
$(“ul li:nth-child(3)”); //匹配其父元素下的第3个子元素,下标从1开始
$(“ul li:nth-child(n)”); //匹配其父元素下的第N个子元素(N分别把1、2、3……带入)
$(“ul li:nth-child(2n)”); //匹配其父元素下的第2N个子元素(N分别把1、2、3……带入)
$(“ul li:nth-child(odd)”); //匹配其父元素下的奇数个子元素(相当于2n+1)
$(“ul li:nth-child(even)”); //匹配其父元素下的偶数个子元素(相当于2n)
5.属性过滤器
代码 | 选择器 |
---|---|
$(“div[id]”); | 匹配有id属性的div元素 |
$(“input[name=‘zhangsan’]”); | 匹配有name属性且为zhangsan的input元素 |
$(“input[name!=‘zhangsan’]”); | 匹配有name属性且不为zhangsan的input元素 |
$(“input[name^=‘s’]”); | 匹配name属性为s开头的元素 |
$(“input[name$=‘s’]”); | 匹配name属性为s结尾的元素 |
$(“input[name*=‘s’]”); | 匹配name属性包含s的元素 |
$(“input[id][name$=‘s’]”); | 匹配有id属性且name属性以s结尾的input元素 |
6.表单选择器
代码 | 选择器 |
---|---|
$(":text"); | 匹配所有单行文本框 |
$(":password"); | 匹配所有密码框 |
$(":radio"); | 匹配所有单选按钮 |
$(":checkbox"); | 匹配所有复选框 |
$(":submit"); | 匹配所有提交按钮 |
$(":image"); | 匹配所有图像域 |
$(":reset"); | 匹配所有重置按钮 |
$(":button"); | 匹配所有按钮 |
$(":file"); | 匹配所有文件域 |
$(":hidden"); | 匹配所有不可见元素,包括display为none或type为hidden的input元素 |
7.表单属性过滤器
代码 | 选择器 |
---|---|
$(“enabled”); | 匹配所有可用元素,默认都是enabled |
$(“input:disabled”); | 匹配所有不可用元素 |
$(“input:checked”); | 匹配所有选中元素(复选框,单选框,select中的option) |
$(“select option:selected”); | 匹配所选中的option元素 |
对于select元素来说,获取选中推荐使用 :selected