一、$.()函数【$】
$.()函数的作用是包装DOM元素,以便于操作(jquery选择器)。作为几个通用的实用工具函数的命名空间前缀,例如,删除字符串前后空格的实用函数,其调用方法如:$.trim(str) ;文档就绪处理程序:包装文档实例,然后调用ready()方法,当文档为操作准备就绪的时候就执行该函数。创建DOM元素,通过给 $()函数传递包含HTML标记的字符串,可以即时创建相应的DOM元素,例如$("Hello word")。
二、jquery选择器
1.基本选择器
1、ID选择器 例:$(#test) 选取id为test的元素2、class选择器 例:$(“.test”) 选取所有class为test的元素3、元素标签选择器 例:$(“p”)选取所有的\<p>元素。4、通配符选择器 例:$(“*”)选取所有的元素。5、群组选择器 例:$(“p a.test”)选取在p元素内 拥有class为test的a元素。
2.层次选择器
层次选择器适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和兄弟元素。
1、后代元素选择器 例: $(“div span”)选取\<div>里的所有的<span>元素。2、子元素选择器 例:$(“div>span”)选取\<div>元素下元素名是\<span>的子元素。3、相邻元素选择器 例:$(“.one+div”)选取class为one的下一个\<div>兄弟元素。4、兄弟元素选择器 例:$(“#two~div”)选取Id为two的元素后面的所有\<div>兄弟元素。
3.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
1、基本过滤选择器:
- :checked:选中复选框或单选按钮- :disabled:禁用的输入框- :enabled:启用的输入框- :focus:当前获得焦点的元素- :hover:鼠标悬停在上面的元素- :in-range-number:指定范围内的数字(例如,10到20之间)- :“”中间的内容:用双引号包裹起来的内容会被视为字符串- ‘’中间的内容:用单引号包裹起来的内容会被视为字符串
CSS选择器是用于选择网页中的元素,以便对其应用样式。以下是一些常见的CSS选择器及其用法:
- `:first` 选取第1个元素
- `:last` 选取最后一个元素
- `:not(selector)` 去除所有与给定选择器匹配的元素
- `:even` 选取索引(从0开始)是偶数的所有元素
- `:odd` 选取索引(从0开始)是奇数的所有元素
- `:eq(index)` 选取索引(从0开始)等于 index的元素
- `:gt(index)` 选取索引(从0开始)大于 index的元素
- `:lt(index)` 选取索引(从0开始)小于 index的元素
- `:header` 选取所有的标题元素,即 `
`到``
- `:animated` 选取当前正在执行动画的所有元素
. 选择器:contains(text)
示例:`$("div:contains('test')")`选取含有文本内容为'test'的`
2. 选择器:empty
示例:`$("div:empty")`选取不包含子元素或文本的空`
3. 选择器:has(selector)
示例:`$("div:has(.myClass)")`选取含有class为'myClass'的元素的`
4. 选择器:parent
示例:`$("div:parent")`选取含有子元素或文本的`
5. 可见性过滤选择器
1. 选择器:hidden
示例:`$("div:hidden")`选取所有不可见的`
2. 选择器:visible
示例:`$("div:visible")`选取所有可见的`
6. 属性过滤选择器
、子元素过滤选择器
在CSS选择器中,我们可以使用子元素过滤选择器来选取特定元素的直接子元素。以下是一些常用的子元素过滤选择器的示例:
1. `>`:选取指定元素后的所有直接子元素。例如:`$("ul > li")` 将选取所有 `
- ` 元素下的直接子 `
- ` 元素。
2. `+`:选取紧跟在指定元素后的同级元素。例如:`$("ul + li")` 将选取紧跟在 `
- ` 元素后的同级 `
- ` 元素。
3. `~`:选取指定元素后的同一级别的所有兄弟元素。例如:`$("ul ~ li")` 将选取所有紧跟在 `
- ` 元素后的同一级别的兄弟 `
- ` 元素。
4. `nth-child(an+b)`:选取指定父元素下指定位置的子元素。其中,`a` 是起始位置(从1开始计数),`b` 是间隔数。例如:`$("ul li:nth-child(2n+1)")` 将选取所有 `
- ` 下的奇数位置的 `
- ` 元素。
通过使用这些子元素过滤选择器,我们可以更精确地定位和操作网页中的特定元素及其子元素。
好的,以下是重构后的内容:
1. 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元素,index从1开始。例如:$("div:nth-child(1)")选取每个
中第一个子元素。2. 选取每个父元素下的第1个子元素。例如:$("div:first-child")选取每个
下第一个子元素。3. 选取每个父元素下的最后1个子元素。例如:$("div:last-child")选取每个
下最后一个子元素。4. 选取只有唯一子元素的元素的子元素。例如:$("div:only-child")选择只有一个子元素的
元素。6. 表单对象属性过滤选择器:
1. 选取所有可用元素。例如:$("body:enabled")选取页面内所有可用元素。
2. 选取所有不可用元素。例如:$("body:disabled")选取页面内所有不可用元素。
3. 选取所有被选中的元素(单选框、复选框)。例如:$("input:checked")选取所有被选中的元素。
4. 选取所有被选中的选项元素(下拉列表)。例如:$("select:selected")选取所有被选中的选项元素。
4. 表单选择器
以下是重构后的内容:
1、选取所有``, `
2、选取所有的单行文本框:`$(":text")`。
3、选取所有的密码框:`$(":password")`。
4、选取所有的单选框:`$(":radio")`。
5、选取所有的复选框:`$(":checkbox")`。
6、选取所有的提交按钮:`$(":submit")`。
7、选取所有的图像按钮:`$(":image")`。
8、选取所有的重置按钮:`$(":reset")`。
9、选取所有的按钮:`$(":button")`。
10、选取所有的上传域:`$(":file")`。
11、选取所有不可见元素:`$(":hidden")`。
- ` 元素。
- ` 元素。
- ` 元素。