小汤学编程之jQuery学习day01——简介、入门、选择器

一、简介

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