jQuery基础课程
jQuery基础选择器
| 选择器 | 使用方法 |
|---|
#id 选择器 |
$("#my_id") |
元素选择器 |
$("button") |
类选择器 |
$(".green") |
* 选择器 |
获取页面的全部元素 |
| 选择多个元素 |
$(".red,.green") |
| 后代选择器 |
$("div label") 包括子元素、孙元素 |
| 直接后代选择器 |
$("div > label") 只包括子元素 |
| 紧邻选择器 |
$("p + label") 选择紧邻p后面的label元素，只获取第一个相邻的元素 |
| 相邻选择器 |
$("p ~ label") 获取p后面全部相邻的label元素 |
jQuery过滤性选择器
| 过滤选择器 | 使用方法 |
|---|
:first |
$("li :first") 获取li标签的第1个元素，返回的只有一个元素，并不是一个集合 |
:last |
$("li :last") 获取最后一个元素 |
:eq(index) |
$("li:eq(2)") 获取索引为2的元素，索引从0开始 |
按照文本内容查找:contains(text) |
$("li:contains('jQuery')") |
按包含元素名称来过滤:has(selector) |
$("li:has('label')") 获取包含label的li元素 |
获取全部不可见的元素:hidden |
$("input:hidden") |
获取的是全部可见的元素:visible |
$("li:visible") |
获取与属性名和属性值完全相同的全部元素[attribute=value] |
$("li[title='蔬菜']") |
获取属性名和属性值不相同的全部元素[attribute!=value] |
$("li[title!='蔬菜']") |
获取属性值中包含指定内容的全部元素[attribute*=value] |
获取属性值中包含指定内容的全部元素 |
获取每个父元素中返回的首个子元素:first-child |
$("li:first-child") 返回的是一个集合 |
获取每个父元素中返回的最后一个子元素:last-child |
$("li:last-child") 返回的是一个集合 |
jQuery表单选择器
| 过滤选择器 | 使用方法 |
|---|
获取表单全部元素:input |
$("#frmTest :input") 包括所有的<input>、<textarea>、<select>、<button> 元素 |
获取表单中全部单行的文本输入框元素:text |
$("#frmTest :text") 就是<input> |
获取密码输入文本框:password |
$("#frmTest :password") |
获取单选按钮:radio |
$("#frmTest :radio") |
获取复选框:checkbox |
$("#frmTest :checkbox") |
获取提交按钮元素（type=submit）:submit |
$("#frmTest input:submit") |
当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，:image获取图像域 |
$("#frmTest :image") |
获取type=button的<input>和<button>元素 :button |
$("#frmTest :button") |
获取:checked（复选框、单选按钮选中时“checked”属性值为“checked”） |
$("#frmTest :checked") |
:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。 |
$("#frmTest :selected") |
jQuery操作DOM元素
| 简介 | 使用方法 |
|---|
设置或者返回属性attr() |
$("#a1").attr("href" , "www.imooc.com"); |
移除属性removeAttr(name) |
|
操作元素内容html()和text() |
|
添加类addClass() |
|
移除类removeClass(class) |
$("#content").removeClass("white blue"); |
添加css样式css() |
$("#content").css({"background-color":"red","color":"white"}); |
向元素中追加内容append(content) |
$("body").append(rethtml()); content可以是字符、HTML元素标记，也可以是返回字符串内容的函数 |
把内容追加到元素中appendTo() |
var $html = "<span class='red'>小青蛙</span>" $($html).appendTo("div"); |
before()在元素的前面插入内容 |
var $html = "<span class='red'>兄弟。</span>" $(".green").before($html); |
after()在元素的后面插入内容 |
$(".green").after($html); |
复制元素clone() |
$("body").append($(".red").clone()); |
替换内容replaceWith() |
$(".green").replaceWith($html); |
替换内容replaceAll() |
$($html).replaceAll($(".green")); |
包裹元素本身wrap() |
$(".red").wrap("<div></div>"); |
包裹元素中的内容wrapInner() |
$(".red").wrapInner("<i></i>"); |
remove()删除所选元素本身和子元素 |
$("span").remove(".red") |
empty()删除所选元素的子元素 |
$("span").empty();
|
霹雳猿教程_-Javascript教程-JavaScript 教程 http://www.piliyuan.com/Javascript/3.html
霹雳猿教程_-Javascript教程-JavaScript 简介 http://www.piliyuan.com/Javascript/25.html
霹雳猿教程_-Javascript教程-JavaScript 用法 http://www.piliyuan.com/Javascript/26.html