jQuery----选择器、操作DOM(样式、属性)
一、简介
jQuery是一个JavaScript函数库，其包含以下特性：
HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX、Utilities
二、开篇
2.1：引用jQuery
1.从jQuery.com网站下载
2.在页面中通过<script>标签引用
注意：<script>标签应该位于<head>标签内
技巧：可以通过网络引用jQuery库，其优势在于某些用户在浏览其他网页时浏览器已加载文件，当其访问页面时浏览器从缓存中加载jQuery，从而减少时间
引用网络jQuery：
引用谷歌CDN：
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> </head>
引用微软CDN：
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> </head>
三、语法之选择器
3.1：普通选择器
id选择：$("#content")，选取id为content的DOM节点
标签选择：$("p")，选取页面中指定名称的所有标签
类选择：$(".red")，选取class为red的节点
*选择：$("*")，选取html中所有节点，例子：$("div *")选取所有div标签节点
多项选择：$("select1,select2,select3...selectN")，可以是上面任意的一种格式(id选择,类选择)，多个以英文逗号隔开
ance desc选择：$("ance desc")。选取ance内部的所有desc标签
parent child选择：$("父>子")，选取父标签的子标签
prev+next选择：$("#content+a")，选取id为content的标签后面第一个a标签
prev~next选择：$("p~a")，选取p标签下面同辈的所有a标签
| 选择器语法 |
说明 |
例子 |
例子解释 |
| $(“#idName”) |
Id选择器 |
$(“con”) |
选取id名称为con的标签返回 |
| $(“.className”) |
class选择器 |
$(“.con”) |
选取class名称为con的标签返回 |
| $(“element”) |
标签选择器 |
$(“a”) |
选取所有a标签返回 |
| $(“*”) |
*选择器 |
$(“div *”) |
选取div下的所有标签 |
| $(“select1,select2...selectN”) |
多项选择器 |
$(“a,#con,.con”) |
选取a标签和id名为con、类名为con的标签 |
| $(“ance desc”) |
|
$(“div p”) |
选取div标签内部的所有p标签 |
| $(“parent>child”) |
父子选择器 |
$(“div>p”) |
选取div标签下第一层(子标签)的p标签 |
| $(“prev+next”) |
|
$(“div+div”) |
选取div后面的第一个div(同辈) |
| $(“prev~next”) |
|
$(“div~div”) |
选取后面的所有同辈div标签 |
3.2：过滤器
first：$("li:first")，选择第一个li标签，用于选中同一组标签中的第一个标签
last：$("li:last")，选择最后一个li标签
eq：$("li:eq(index)")，选择一组li标签中index位置的标签，index从0开始
contains：$("li:contains('美女')")，选取li标签组中所有包含美女字符的li标签
has：$("li:has('p')")，选取一组li标签中包含p标签的标签
hidden：$("input:hidden")，选取隐藏了的input标签
visible：$("input:visible")，选取所有可见的input标签
3.3：first-child和last-child
first-child：$("li:first-child")，比first功能强大，其可以选择多组的li标签中的第一个li元素
last-child：$("li:last-child")，比last功能强大，其可以选择多组li标签中最后一个li元素
3.4：属性选择器
attribute=value：$("li[title='蔬菜']")，选取li标签中title属性的值为蔬菜的所有标签
attribute!=value：$("li[title!='蔬菜']")，选取li标签组中title不包含蔬菜的所有标签，其中[]为专属属性的符号
attribute*=value：$("li[title*='果']")，获取li标签组中title属性包含‘果’字符的所有li标签
3.5：表单选择器
input：$("#formTest:input")，选择表单中所有input标签，包括input、textarea、select、button
text：$("#formTest:text")，选择表单中全部单行的文本框
password：$("#formTest:password")，选择表单中全部的密码框
radio：$("$#formTest:radio")，选择表单中全部的radio(单选框)
checkbox：$("#formTest:checkbox")，选取表单中全部的复选框
input:submit：$("#form input:submit")，选取表单中的submit(提交按钮)
image：$("#form:image")，选取input标签中type属性为image的标签
button：$("#form:button")，获取所有input标签中type属性为button的按钮与<button>标签包裹的按钮
checked：$("#form:checked")，获取所有处于选中状态的元素(单选框、复选框)
selected：$("#form:selected")，获取所有select标签中被选中的option选项元素
四、语法之操作DOM元素
4.1：操作元素内容(获取、设置、添加、复制、替换、包含、遍历)
获取、设置：
html()：无参表示获取，有参表示设置，html()函数会获取元素的HTML内容，因此原文中的格式也被一起获取，当字符串被标签包裹会将标签解析
text()：无参表示获取值，有参表示设置，text()函数只会获取元素中文本内容
添加：
append(content)：给制定元素添加内容，content必须是字符或包含html标记的字符
<body> <h3>append方法动态添加内容</h3> <script> var $html = "<div id='test' title='hi'>我是动态创建的</div>"; $("body").append($html); </script> </body>
$(content).appendTo(selector)：将content插入到selector标签内，默认在尾部，可以是html元素
<script type="text/javascript"> var $html = "<span class='red'>小青蛙</span>" //将$tml添加到div标签中，由于$html有标签所以会以标签形式显示 $($html).appendTo("div"); </script>
before：$(selector).before(content)，在selector内部的最前面添加content
after：$(selector).after(content)，在selector内部最后面添加content
复制：
clone()：$(selector).clone()，复制一个元素，包含他的节点、文本、属性
替换：
replaceWith：$(selector).replaceWith(content)
replaceAll：$(content).replaceAll(selector)
包含：
selector为被包裹的元素wrapper为包含元素
wrap：$(selector).wrap(wrapper)，包裹selector本身
wrapInner：$(selector).wrapInner(wrapper)，包裹selector里面的内容
遍历：
each()：$(selector).each(function(index))，遍历指定的元素集合，
<h3>使用each()方法遍历元素</h3> <span class="green">香蕉</span> <span class="green">桃子</span> <span class="green">葡萄</span> <span class="green">荔枝</span> <script type="text/javascript"> //each函数演示 $("span").each(function (index) { if (index == 1) { $(this).attr("class", "red"); } }); </script>
删除：
remove()：该方法删除所选元素本身和子元素、可通过添加过滤参数来指定需要删除的某些元素
//删除span标签组中类名为red的元素 $("span").remove(".red");
empty()：只删除所选元素的子元素
4.2：操作元素样式(添加样式、删除样式)
addClass()：
<head> <style type="text/css"> .bg{ background-color:blue; } .color{ color:red } </style> </head> <body> <div id="content">我穿了一件外衣</div> </body> <scipt> $("#content").addClass("bg color"); </script>
removeClass()：remove("white blue")，删除white和blue两个样式
css()：
<body> <div id="content">我穿了一件外衣</div> <script> $("#content").css({"background-color":"red","color":"white"}); </script> </body>
4.3：操作元素属性(添加设置、删除)
添加设置：
attr()：设置或者返回元素的属性，$("#con").attr("属性")，获取属性值、$("#con").attr("属性","值")，设置属性值
删除：
removeAttr()：$("a").removeAttr("href")，删除a标签的href属性
4.4：