首頁  >  文章  >  web前端  >  JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器

JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器

coldplay.xixi
coldplay.xixi轉載
2021-01-18 17:53:082246瀏覽

JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器

相關免費學習推薦:#javascript##(影片)

jQuery常用選擇器和過濾選擇器

#使用方法 下載Jquery檔案庫,保存在網站js資料夾中,使用script標籤引入,放在head標籤內
window.οnlοad=function()可簡化為$(function)

window.οnlοad=function(){ … 頁面載入事件}

$(function){ …頁面載入事件}
下面的是上面的簡化方式

#jQuery的選擇器


基本選擇器
  1. $("#id")  :id选择器 
    	$("p") :p选择器	$(".class") :类选择器	$(".class,.class2,#id") :组合选择器
層次選擇器
  1. $("#id>.class") :子元素选择器$("#id .class") :后代选择器$("#id+.class") :紧邻下一个元素选择器$("#id~.class") :兄弟元素选择器
表單選擇器
  1. $(":input")//获取inpu。textarea,select,button元素$(":text")//所有的单行文本框$(":text")等价于$("[type=text]"),推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素$(":radio") //获取type=radio的input元素$(":checkbox") //获取type=checkbox的input元素$(":submit") //获取type=submit的input元素$(":reset") //获取type=reset的input元素$(":button") //获取type=button的input元素$(":file") //获取type=file的input元素$(":image") //获取type=image的input元素
#jQuery的過濾器
  1. 過濾器使用:開頭
    #基本過濾選擇器
  1. $("Ii:first") :第一个li 	
    $("li:last") :最后一个li   
    $("li:even") :挑选 下标为偶数的li  
    $("li:odd") :挑选 下标为奇数的li  
    $("Ii:eq(4)") :下标等 于4的li(第五个li元素)$("Ii:gt(2)") :下标大于 2的li  
    $("li:lt(2)") :下标小于 2的li$("Ii:not(#runoob)") :挑选除id="runoob"以外的所有li$("Ii:header") :所有标题元素$("Ii:animated") :正在执行动画效果的元素

內容過濾選擇器

$("li:contains(text)") :含有文本内容为text的元素$("li::empty"):获取不包含后代元素或者文本的空元素$("li::has(selector)"):获取含有后代元素为selector的元素$("li::parent"):获取含有后代元素或者文本的非空元素

可見性篩選器

$("li:hidden") :隐藏li元素$("li:visible") :显示li元素

屬性過濾選擇器

$("li[title]") :获取所有属性包括title的li元素$("p[id^='qq']") :id属性值以qq开头的p元素$("p[id*='bb'") :id属性值包含bb的p元素$("li[title=text2]") :li属性值等于text2的元素$("p[id!='aa'") :id属性值不等于aa的p元素$("p[id$='z']") :id 属性值以zz结尾的p$("input[id][name$='man']"):多属性选过滤,同时满足两个属性的条件的元素
表單物件屬性過濾選擇器
$("input:enabled") :选取可用的表单元素$("input:disabled") :选取不可用的表单元素$("input:checked") :选取被选中是input元素$("input:selected") :选取被选中的option元素


jQuery操作DOM

產生jquery物件

var obj=$("#content")
取得或設定元素內部的HTML程式碼

var obj=$("#content");
obj.html("jQuery对象")

DOM物件轉換成jQuery物件
<script>
		var $text=$(document.getElementsByTagName("li"));
		alert($text.eq(0).html());//获取第一个li里的值
		alert($text.eq(1).html());//获取第二个li里的值</script>
jQuery使用DOM操作元素

單一屬性語法jQuery物件.css(name,value):name為樣式名稱,value為樣式值同時設定多個屬性語法
jQuery物件.css{(name:value,name:value,name:value…)}:name為樣式名稱,value為樣式值







jQuery使用DOM操作元素增加類別樣式,刪除類別樣式,切換不同類別樣式

jQuery物件.addaClass(class)

jQuery物件.removeaClass(class)

jQuery物件.toggleClass (class)

jQuery使用DOM操作元素內容和值的操作

#jQuery物件.html():用於取得第一個符合元素的HTML內容或文字內容

jQuery物件.html(content):用於設定所有符合元素的HTML內容或文字內容

jQuery物件.text():用於取得所有符合元素的文字內容

jQuery物件. text(content):用於設定所有符合元素的文字內容 jQuery物件.val():用於取得或設定元素的值 jQuery物件.attr(name):用於取得元素的屬性值

jQuery物件.attr(name,value):用於設定元素的屬性值
    jQuery物件.attr(name,function(index)):綁定function函數,透過此函數傳回值作為元素的屬性值
  • jQuery物件.removeAttr(name):用於刪除元素的屬性值
  • #jQuery使用DOM操作節點
  • $(html):建立html的jQuery物件
eg:$("<a></a>").appendTo(p)
  • a.append(b):a裡新增b
  • eg:$("ul").append("li"):a里添加b
  • a.appendTo(b):a加入b
  • eg:$li.appendTo("ul"):a添加到b
  • a.prepend(b):將b前置插入a中
  • eg:	$("ul").prependTo("li")
  • a.prependTo(b):將a前置插入到b中
  • eg:	$li.prependTo("ul")
  • a.after(b):將b插入到a之後
  • eg:	$("ul").after($p)
  • a.insertAfter(b):將a插入到b之後
  • eg:	$p.insertAfter("ul")
  • a.before(b):將b插入到a之前
  • eg:	$("ul").before($p)
  • a.insertBefore (b):將a插入b之前
  • eg:	$p.insertBefore("ul")
    a.replaceWith(b):將a替換為b

    eg:	$("li").replaceWith("ol")
    JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器a.replaceAll(b):用b替換a
    eg:	$("ol").replaceAll("li")
    JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器a.clon(ture):複製a
    eg:	$("ol").clon(ture)
    ###a.remove(a):刪除a###
    eg:	$("ul li").remove()//删除ul下的所有li
    	$("ul li").remove("li li:last")//删除ul下的最后一个li
    ###jQuery物件.each(callback):遍歷元素###
     
    	
    		<meta>
    		<title></title>
    		<script></script>
    		<script>
    			$(function(){
    				$("input[type=&#39;button&#39;]"). click(function(){
    					$("img").each(function(index, element){
    						//jQuery对象
    						//$(this).css("border","2px solid red");
    						//$(this).attr("title"," 第 "+(index+1)+"副风景画");
    						//DOM对象
    						this.style.border="2px solid red";
    						this.title="第"+(index+1)+"幅风景画";
    					});
    				});
    			});
    
    		</script>
    	<p>
    		<img  alt="JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器" >   
    		<img  alt="JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器" >
    	</p>
    	<input>	

    以上是JavaScript知識點總結之 jQuery常用選擇器和過濾選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除