Summary of JavaScript knowledge points: jQuery common selectors and filter selectors

Related free learning recommendations: javascript(Video)

jQuery common selectors and filter selectors

How to use
Download the Jquery file library and save it in the js folder of the site , use the script tag to introduce it and place it in the head tag
window.οnlοad=function() can be simplified to $(function)

window.οnlοad=function(){ … page load event}
$(function){ ...page load event}
The following is a simplified way of the above

jQuery's selector

1. Basic Selector

$("#id")  ：id选择器 
	$("p") ：p选择器	$(".class") ：类选择器	$(".class,.class2,#id") ：组合选择器

2. Hierarchical Selector

$("#id>.class") ：子元素选择器$("#id .class") ：后代选择器$("#id+.class") ：紧邻下一个元素选择器$("#id~.class") ：兄弟元素选择器

3. Form Selector

$(":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 Filter
Filter to use: Starting with

1. Basic filter selector

$("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") ：正在执行动画效果的元素

2. Content filter selector

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

3. Visibility filter

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

4. Attribute filter selector

$("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']")：多属性选过滤，同时满足两个属性的条件的元素

5. Form object attribute filter selector

$("input:enabled") ：选取可用的表单元素$("input:disabled") ：选取不可用的表单元素$("input:checked") ：选取被选中是input元素$("input:selected") ：选取被选中的option元素

jQuery operates DOM

Generate jquery object

var obj=$("#content")

Get or set the HTML code inside the element

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

DOM object conversion Into a jQuery object

<script>
		var $text=$(document.getElementsByTagName("li"));
		alert($text.eq(0).html());//获取第一个li里的值
		alert($text.eq(1).html());//获取第二个li里的值</script>

jQuery uses DOM to manipulate elements

Single attribute syntax jQuery object.css(name,value): name is the style name, value is The style value sets multiple attributes at the same time. Syntax
jQuery object.css{(name:value,name:value,name:value...)}: name is the style name, value is the style value

jQuery uses DOM manipulation elements to add class styles, delete class styles, and switch different class styles

jQuery object.addaClass(class)
jQuery object.removeaClass(class)
jQuery object.toggleClass (class)

jQuery uses DOM to operate element content and value operations

jQuery object.html(): used to get the HTML content of the first matching element or Text content
jQuery object.html(content): used to set the HTML content or text content of all matching elements
jQuery object.text(): used to get the text content of all matching elements
jQuery object. text(content): used to set the text content of all matching elements
jQuery object.val(): used to get or set the value of the element
jQuery object.attr(name): used to get the attribute value of the element
jQuery object.attr(name, value): used to set the attribute value of the element
jQuery object.attr(name, function(index)): bind the function function, through which the value is returned as the attribute of the element Value
jQuery object.removeAttr(name): Attribute value used to delete elements

jQuery uses DOM operation nodes
$(html): Create html jQuery object

eg:$("<a></a>").appendTo(p)

a.append(b): add b

eg:$("ul").append("li"):a里添加b

a.appendTo(b): a to b

eg:$li.appendTo("ul"):a添加到b

a.prepend(b): Insert b into a in front

eg:	$("ul").prependTo("li")

a.prependTo(b): Insert a in front into b

eg:	$li.prependTo("ul")

a.after(b): Insert b after a

eg:	$("ul").after($p)

a.insertAfter(b): Insert a after b

eg:	$p.insertAfter("ul")

a.before(b): Insert b before a

eg:	$("ul").before($p)

a.insertBefore (b): Insert a before b

eg:	$p.insertBefore("ul")

a.replaceWith(b): Replace a with b

eg:	$("li").replaceWith("ol")

a.replaceAll(b): Replace a

eg:	$("ol").replaceAll("li")

# with b ##a.clon(ture): Copy a

eg:	$("ol").clon(ture)

a.remove(a): Delete a

eg:	$("ul li").remove()//删除ul下的所有li
	$("ul li").remove("li li:last")//删除ul下的最后一个li

jQuery object.each(callback): Traverse the elements

 
	
		<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="Summary of JavaScript knowledge points: jQuery common selectors and filter selectors" >   
		<img  alt="Summary of JavaScript knowledge points: jQuery common selectors and filter selectors" >
	</p>
	<input>	

The above is the detailed content of Summary of JavaScript knowledge points: jQuery common selectors and filter selectors. For more information, please follow other related articles on the PHP Chinese website!