JQuery中$的全部使用

目录

1. 功能函数前缀

 2. 创建DOM元素

3. 选择器

3.1 基本选择器

       3.1.1 通配符选择器

       3.1.2 ID选择器

       3.1.3 类名选择器

       3.1.4 元素选择器

       3.1.5 复合选择器

3.2 层级选择器

3.2.1 祖先后代选择器

3.2.2 父子选择器

3.2.3 相邻元素选择器

3.2.4 兄弟元素选择器

3.3 过滤选择器

3.3.1 简单过滤选择器

（1）:first选择器

（2）:last选择器

（3）:even选择器

（4）:odd选择器

3.3.2 内容过滤选择器

3.3.3 可见性过滤器

3.3.4 表单过滤器

3.4 表单选择器

3.5 属性选择器

---

1. 功能函数前缀

var String="   书中自由黄金屋 ";
String=$.trim(String);
//直接调用trim()功能函数，自动去除文本框中的空格

 2. 创建DOM元素

//原生JS添加
var newe=document.createElement("p");
var newtext=document.createTextNode("Hello World!");
newe.appendChild(NewText);
//JQ
var newe=$("<p>Hellow world!<p>");

3. 选择器

3.1 基本选择器

       3.1.1 通配符选择器

所有标签下的子元素

语法：$(*)

用例：$("body>div *")

       3.1.2 ID选择器

语法：$("#id")

       3.1.3 类名选择器

语法：$(".class")

       3.1.4 元素选择器

语法：$("element")

用例：$("h1")

       3.1.5 复合选择器

语法：$("selector1,selector2,...")

用例：$("#ch,.intro")

3.2 层级选择器

3.2.1 祖先后代选择器

祖先元素下，所有的后代元素

语法：$("ancestor descendant")

用例：$("ul li")

3.2.2 父子选择器

child必须包含在parent元素之中

语法：$("parent>child")

用例：$("form>input")

3.2.3 相邻元素选择器

next必须紧跟prev元素

语法：$("prev+next")

用例：$("div+p")

3.2.4 兄弟元素选择器

选择同级sibilings元素

语法：$("prev~siblings");

用例：$("div~ul");

3.3 过滤选择器

3.3.1 简单过滤选择器

（1）:first选择器

选择第一个元素

$(“p:first")

（2）:last选择器

选择最后一个元素

（3）:even选择器

选择带有偶数的index值元素，index值从0开始，偶数值（0，2，4，6...)

$("tr:even")

（4）:odd选择器

选择带有奇数的index值元素，index值从0开始，奇数值（1，3，5，7...）

$("tr:odd")

3.3.2 内容过滤选择器

（1）:contains(text)

选择包含文本的元素

$("p:contains(is)"

//选择p元素，包含is文本的元素

（2）:empty

选择文本为空，或不包含子元素的元素

$("td:empty")

//选择td元素，不包含文本或不包含子元素的元素

（3）:parent

包含子元素或有文本的元素

$("td:parent")

//有文本或者有子元素的td元素

（4）:has(selector)

包含元素在内的所有元素

$("span:has(p)")

//含有p元素的所有span元素

3.3.3 可见性过滤器

（1）:hidden

$("p:hidden")

//获取页面所有隐藏的p元素

（2）:visible

$("table:visible")

//获取页面所有可见table元素

3.3.4 表单过滤器

（1）:enabled

$("input:disabled")

//获取所有input中可用元素

（2）:disabled

$("input:disabled")

//获取所有input中不可用元素

（3）:checked

$("input:checked")

//获取所有input被选中的元素（不包括select中的option）

（4）:selected

$("select option:selected")

//获取所有选中的option元素

3.4 表单选择器

3.4.1 :input

$(":input")

//选取所有input元素，该选择器同样适用<button>元素

3.4.2 :text

$(":text")

//选取所有input元素中类型为text的元素

3.4.3 :password

$(":password")

//选取所有input元素中类型为password的元素

3.4.4 :radio

$(":radio")

//选取所有input元素中类型为radio的元素

3.4.5 .checkbox

$(":checkbox")

//选取所有input元素中类型为checkbox的元素

3.4.6 :submit

$(":submit")

//选取所有input、button元素中类型为submit的元素

3.4.7 :reset

$(":reset")

//选取所有input、button元素中类型为reset的元素

3.4.8 :button

$(":button")

//选取所有input、button元素中类型为button的元素

3.4.9 :image

$(":image")

//选取所有input元素中类型为image的元素

3.4.10 :file

$(":file")

//选取所有input元素中类型为file的元素

3.5 属性选择器

3.5.1 [attribute]

$("[id]")

//选取所有带有id属性的元素

3.5.2 [attribute=value]

$("[id=choose]")

//选取所有相等，id=choose属性的元素

3.5.3 [attribute!=value]

$("[id!=choose]")

//选取所有不相等，id=choose属性的元素

3.5.4 [attribute$=value]

$("[id$=choose]")

//选取所有带有id属性，且以choose为结尾的元素