首页 > 代码库 > jquery基础

jquery基础

2024-08-22 05:38:45   223人阅读

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

jquery基础


联系
我们