一、入口函数
原生 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 | 获取所有被选中的选项元素(下拉框) |