jQuery 常用方法总结

一、入口函数

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

//原生 js 的入口函数。页面上所有内容加载完毕，才执行。
//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
window.onload = function () {
    alert(1);
}

 jQuery的入口函数，有以下几种写法：

写法一：

文档加载完毕，图片不加载的时候，就可以执行这个函数。

       //文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

       //上面这个个函数的简洁版，效果一样
       $(function () {
           alert(1);
       });

写法二：

文档加载完毕，图片也加载完毕的时候，在执行这个函数。

       //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

 

二.、选择器

1、基本选择器

选择器		描述	返回
$("#div")	【ID选择器】	“#”号开头是	单个元素
$(".div")	【class类选择器】	“.”开头是	元素集合
$("div")	【标签选择器】	直接写标签名是	元素集合
$(".div1, p")	【群组（多项）选择器】	“,”以逗号分隔，每一个为一个选择器规则，并集选择器 将每一个选择器匹配到的元素合并后一起返回(群组选择器) （例：$(".div1, p")是同时选择 class 为 div1 的元素和 p 标签）	元素集合

2、层级选择器（返回元素集合）

选择器		描述
$("table tr .aa")	【后代选择器】空格	中间以空格隔开，后代选择器，是逐层定位（祖先与所有后代） 在指定父元素下匹配所有的后代元素 代表是选取某父元素下的所有（后代）元素，不仅仅是直接子元素 （例：table 标签下的所有 tr 标签中 class 为 aa 的对象） 注意：父下所有后代元素，包含了父下所有的匹配元素
$("div>span")	【子代选择器】>	“>”隔开，子代选择器（仅仅是父与子，不包含子的后代） 在指定父元素下匹配所有的子元素 （例：选取parent元素下的child（子）元素，直接子元素） 注意：父下所有子元素，但不包括子元素中的后代元素
$(".one+div")	【紧邻选择器】+	.选取紧挨着prev元素后的next元素(下一个元素) （例：$(".one+div")选取class为one的下一个<div>元素）
$("prev~siblings")	【同级选择器】~	选取prev元素后面的所有兄弟元素

3、属性选择器 （返回元素集合）

通过特定属性来定位元素

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

（例：$('input[name="user"]')选取input标签中属性name等于user的元素）

选择器	描述
$('[attribute]')	获取包含特定属性的元素
$('[attribute=value]')	特定属性等于某个值的元素
$('[attribute!=value]')	特定属性不等于某个值的元素
$('[attribute^=value]')	特定属性以某些值开头的元素
$('[attribute$=value]')	特定属性以某些值结尾的元素
$('[attribute*=value]')	特定属性包含某些值的元素
$('[attribute1][attribute2][attribute3]')	获取满足多个属性条件的复合属性的元素

$("#div1")  =>  根据元素的id属性值来查找节点(id选择器)
$(".div1")  =>  根据元素的class属性值来查找节点(class选择器)
$(".div1, p")  =>  将每一个选择器匹配到的元素合并后一起返回(群组选择器)
$(".div1 ul li")  =>  查找祖先元素下匹配所有的后代元素(结构选择器)
$(".div1 > ul > li")  =>  查找给定的父元素下匹配所有的子元素(结构选择器)
$(".div1 ul li:eq(1)")  =>  查找一个给定索引值的元素(索引值是从0开始)
$('input[name="user"]')  =>  根据元素的属性来查找元素
$(".div1:visible")  =>  查找所有的可见元素
$("input:checked")  =>  选中的表单控件
$("select option:selected")  =>  匹配所有选中的option元素

 

4、过滤选择器

简单过滤选择器 

简单过滤选择器
选择器	描述	返回值
:first	匹配找到的第一个元素	单个元素的组成的集合
:last	匹配找到的最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素，有点类似于”非”	集合元素
:even	匹配所有索引值为偶数的元素 从0开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.	集合元素
:odd	匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数	集合元素
:eq(index)	匹配一个给定索引值的元素 eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数	单个元素
:gt(index)	匹配所有大于给定索引值的元素	集合元素
:lt(index)	匹配所有小于给定索引值的元素	集合元素
:header	获取所有标题类的元素 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素	集合元素
:animated	获取正在执行动画效果的元素	集合元素

内容过滤选择器 

内容过滤选择器
:contains(text)	获取包含给定文本的元素	集合元素
:empty	获取所有不包含子元素或者文本的空元素	集合元素
:has(selector)	获取含有选择器所匹配的元素的元素	集合元素
:parent	获取含有子元素或者文本的元素	集合元素

可见性过滤选择器 

可见性过滤选择器
:hidden	获取所有不可见元素，或者type为hidden的元素	集合元素
:vidible	获取所有可见元素	集合元素

子元素过滤选择器

子元素过滤选择器
:nth-child(eq|even|odd|index)	获取每个父元素下的特定位置元素，索引号从1开始	集合元素
:first-child	获取每个父元素下的第一个子元素	集合元素
:last-child	获取每个父元素下的最后一个子元素	集合元素
:only-child	获取每个父元素下的仅有一个子元素	集合元素

筛选选择器

筛选选择器
find(selector)	查找指定元素的所有后代元素（包含子元素的后代元素）	集合元素
children()	查找指定元素的直接子元素（只是子元素不包含子元素的后代元素）	集合元素
siblings()	查找所有兄弟元素（不包括自己）	集合元素
parent()	查找父元素	集合元素
eq(index)	查找指定元素的第index个元素 index是索引号 ，从0开始

$("div").eq(1)  =>  获取第N个元素(从0开始)
$("li").first()  =>  获取第一个元素
$("li").last()  =>  获取最后一个元素
$(".div1").hasClass("selected")  =>  判断元素是否有指定的类   有返回true或false
$(".div1").children()  =>  返回所有的子元素，参数可以是一个选择器，会对子元素进行筛选
$(".div1").find("span")  =>  获取.div1节点下的所有的span元素(后代元素)
$(".div1").next()  =>  获取下一个兄弟节点
$(".div1").nextAll()  =>  获取下边所有的兄弟节点
$(".div1").prev()  =>  获取上一个兄弟节点
$(".div1").prevAll()  =>  获取上边所有的兄弟节点
$(".div1").siblings()  =>  获取.div1元素所有的兄弟节点
$(".div1").parent()  =>  查找.div1元素的父节点
$(".div1").parents("选择器")  =>  返回指定的祖先元素
$(".div1").find("p").end()  =>  将匹配的元素列表变为上一次的状态

5、表单选择器

选择器	描述
:input	获取所有input、textarea、select
:text	获取所有单行文本框
:password	获取所有密码框
:radio	获取所有单选按钮
:checkbox	获取所有复选框
:submit	获取所有提交按钮
:image	获取所有图像域
:reset	获取所有重置按钮
:button	获取所有按钮
:file	获取所有文件域
表单对象属性过滤选择器
:enabled	获取所有可用元素
:disabled	获取所有不可用元素
:checked	获取所有被选中的元素（单选框、复选框）
:selected	获取所有被选中的选项元素（下拉框）