首页 > 代码库 > jquery基础
jquery基础
1.jquery语法
基础语法:$(selector).action()
-1.美元符号$定义jquery
-2.选择符(selector)"查询"和"查找"HTML元素
-3.jQuery的action()执行对元素的操作
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }) })
2.jquery基础选择器
1.All Selector("*")
描述:选择所有元素
语法:$("*")
注意:由于选取的是所有元素,因此浏览器将会比较缓慢,这个选择器需要谨慎使用
2.Class Selector(".class")
描述:选择给定样式类名的所有元素
语法:$(".class")
3.Element Selector("element")
描述:根据给定(html)标记名称选择所有的元素
语法:$("element")
4.ID Selector("#id")
描述:选择一个具有给定id属性的单个元素
语法:$("#id")
5,Multiple Seletor(“selector1,selector2,selectorN”)
描述:将每个选择器匹配到的元素合并到一起后返回
语法:$(“selector1,selector2,selectorN”)
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <div> <span class="s"></span> <p></p> <label id="lab"></label> <h1></h1> <a>haha</a> <b>heihei</b> </div> <script> $(function(){ $("div *").html("we are family"); }) $(function(){ $(".s").html("hello"); }) $(function(){ $("p").html("world"); }) $(function(){ $("#lab").html("yangf"); }) $(function(){ $("a, b").html("prog"); }) </script> </body> </html>
3.jquery的属性选择器
1.Attribute Contains Prefix Selector [name|= "value"]
描述:选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符"-")的元素。
语法:$("[attribute|= ‘value‘]")
注意:引号是可选的,可以是一个不带引号的一个单词或带一个引号的字符串
2.Attribute Contains Selector [name *= "value"]
描述:选择指定属性具有包含一个给定的字符串的元素。(选择给定的属性是以包含某些值的元素)
语法:$("[attribute* = ‘value‘]")
3.Attribute Contains Word Selector [name ~= "value"]
描述:选择指定属性用空格分割的值中包含一个给定值的元素。
语法:$("[attribute ~= ‘value’]")
4.Attribute Ends With Selector [name= "value"]
描述:选择指定属性是给定值的元素
语法:$("[attribute =‘value‘]")
5.Attribute Not Equal Selector [name!= "value"]
描述:选择不存在指定属性,或者指定的属性值不等于给定值的元素
语法:$([attribute != ‘value’])
6.Attribute Ends With Selector [name= "value"]
描述:选择指定属性是以给定值结尾的元素,区分大小写
语法:$("[attribute$=‘value‘]")
7.Attribute Starts With Selector [name= "value"]
描述:选择指定属性是以给定值开始的元素。
语法:$("[attribute^=‘value‘]")
8.Has Attribute Starts Selector [name]
描述:选择所有具有指定属性的元素,该属性可以是任何值。
语法:$("[attribute]")
9.Multiple Attribute Selector [name = "value"][name = "value2"]
描述:选择匹配所有指定的属性筛选器的元素。
语法:$("[attributeFilte1][attributeFilte2][attributeFilteN]")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <a href="#" hreflang="en">英文</a> <a href="#" hreflang="zh">中文</a> <input name="man-news" id="man-news"/> <input name="milk man"/> <input id="letterman2" name="new-letterman"/> <input name="newmilk"/> <script> $(function(){ $("[hreflang = en]").css("color", "red"); }) $(function(){ $("input[name~=‘man‘]").val(‘mr man is in it‘); }) $(function(){ $("input[id][name$=‘man‘]").val("only this one"); }) </script> </body> </html>
jquery基础