jquery基础

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