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>
4.基础过滤
-1.animated Selector
描述：选择所有正在执行动画效果的元素。
语法：$(“:animated”)
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: yellow; float: left; border: 1px solid #aaaaaa; margin: 0 5px; } .colored{ background-color: green; } </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <button id="run">run</button> <div></div> <div id="mover"></div> <div></div> <script> $(function(){ $("#run").click(function(){ $("div:animated").toggleClass("colored"); }); function animatedIt(){ $("#mover").slideToggle("slow", animatedIt); } animatedIt(); }) </script> </body> </html>
-2.:eq() Selector
描述：在匹配的集合中选择索引值为index的元素
语法：(1) $(":eq(index)")：index：要匹配元素的索引值(从0开始计数)
(2) $(":eq(-index)")：-index：要匹配元素的索引值(从0开始计数)，从最后一个元素开始倒计数。
-3.even Selector
描述：选择索引值为偶数的元素，从0开始计数。也可以查看odd(奇数)。
语法：$(":even")
注意：这是基于0的索引，所以：even选择器是选择第一个元素，第三个元素，以此类推在匹配。
-4.：first Selector
描述：选择第一个匹配的元素。
语法：$(":first")
-5. ：focus Selector
描述：选择当前获取焦点的元素。
-6. ：header Selector
描述：选择所有标题元素，像h1，h2，h3等
语法：$(“：header”)
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .focused{ background-color: #abcdef; } </style> <script src="jquery-3.2.1.min.js"></script> </head> <body> <div id="content"> <input tabindex="1"/> <input tabindex="2"/> <select tabindex="3"> <option>select menu</option> </select> <div tabindex="4"> a div </div> </div> <script> $(function(){ $("#content").delegate("*","focus blur", function(event){ var e = $(this); setTimeout(function(){ e.toggleClass("focused", e.is(":focus")); }, 0); }) }) </script> </body> </html>
-7.：last Selector
描述：选择最后一个匹配元素。
语法：$（"：last"）
-8.：gt() Selector
描述：选择匹配集合中所有大于给定index的元素
语法：$(":gt（index）")或者$(":gt（-index）")
-9.：lt() Selector
描述：选择匹配器集合中所有索引值小雨index的元素。
语法：$(":lt（index）")或者$(":lt（-index）")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="jquery-3.2.1.min.js"></script> <body> <table border="1"> <tr><td>D #0</td><td>TD #1</td><td>TD #2</td> </tr> <tr><td>D #3</td><td>TD #4</td><td>TD #5</td> </tr> <tr><td>D #6</td><td>TD #7</td><td>TD #8</td> </tr> </table> <script> $(function () { $("td:lt(4)").css("color", "red"); }) </script> </body> </html>
-10.:not() Selector
描述：选择所有元素去除不匹配给定的选择器的元素。
语法：$(":not(selector)")
5.子元素过滤
-1.：first-child Selector
描述：选择所有父级元素下的第一个子元素
语法：$"：first-child")
-2.：last-child Selector
描述：选择所有父级元素下的最后一个子元素
语法：$“：last-child”)
-3.：first-of-type Selector
描述：选择所有相同元素名称的第一个兄弟元素
语法：$“：first-of-type”)
-4.：last-of-type Selector
描述：选择所有相同元素名称的最后一个兄弟元素
语法：$“：last-of-type”)
-5.：nth-child() Selector
描述：选择他们所有父元素的第n个元素。
语法：$(":nth-child(index/even/odd/equation)")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> <style> .sogreen{ background-color: green; } </style> </head> <body> <div> <span>s1</span> <span>s1</span> <span>s1</span> </div> <div> <span>s1</span> <span>s1</span> <span>s1</span> </div> <div> <span>s1</span> <span>s1</span> <span>s1</span> </div> <script> $(function(){ $("div span:first-child").css("text-decoration", "underline").hover(function(){ $(this).addClass("sogreen"); }, function(){ $(this).removeClass("sogreen") }); }) </script> </body> </html>
6.内容过滤
-1.：container() Selector
描述：选择所有包含指定文本的元素
语法：$("：contains(text)")
注意：text：用来查找的一个文本字符串。这是区分大小写的。匹配的文本可以直接出现在所选的元素中，
或在该元素的任何后代中，或两者兼有。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <div>yangf</div> <div>abc</div> <div>ooo</div> <div>mmm</div> <script> $(function(){ $("div:contains(yangf)").css("text-decoration","underline"); }) </script> </body> </html>
-2.：empty Selector
描述：选择所有没有子元素的元素(包括文本节点)
语法：$("：empty")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <table border="1"> <tr><td>#TD 0</td><td></td></tr> <tr><td>#TD 2</td><td></td></tr> <tr><td></td><td>#TD 5</td></tr> </table> <script> $(function(){ $("td:empty").css("color", "red"); }) </script> </body> </html>
-3.：has() Selector
描述：选择元素其中至少包含指定选择器匹配的一个种元素。
语法：$("has(selector)")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> <style> .text{ border:1px solid green; } </style> </head> <body> <div><p>hello world</p></div> <div>hello jQuery!</div> <script> $(function(){ $("div:has(p)").addClass("text"); }) </script> </body> </html>
-4.parent Selector
描述：选择所有含有子元素或者文本的父级元素。
语法：$("：parent")
7.表单
-1.：button seletor
描述：选择所有按钮元素和类型为按钮的元素
语法：$(":button")
-2.：checkbox selector
描述：选择所有类型为复选框的元素
语法：$(“：checkbox”)
-3.：checked selector
描述：匹配所有勾选的元素
语法：$(“：checked”)
-4.：disabled selector
描述：选择所有被禁用的元素
语法：$("：disabled")
-5.：enabled selector
描述：选择所有可用的(未被禁用)元素
语法：$(":enabled")
-6.：file selector
描述：选择所有类型为文件的元素
语法：$(":file")
-7：focus selector
描述：选择当前获取焦点的元素
语法：$(":focus")
-8：image selector
描述：选择所有图像类型的元素
语法：$(":image")
-9：input selector
描述：选择所有input，textarea，select，button元素
语法：$(":input")
-10：password selector
描述：选择所有类型为密码的元素
语法：$(":password")
-10：radio selector
描述：选择所有类型为单选框的元素
语法：$(":radio")
-11：radio selector
描述：选择所有类型为提交的元素
语法：$(":submit")
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> <style> textarea{ height:35px; } div{ color:red; } fieldset{ margin: 0; padding: 0; padding-width: 0; } .marked{ background-color: yellow; border: 3px solid red; } </style> </head> <body> <form> <fieldset> <input type="button" value="input button"/> <input type="checkbox"/> <input type="file"/> <input type="hidden"/> <input type="image"/> <input type="password"/> <input type="radio"/> <input type="reset"/> <input type="submit"/> <input type="text"/> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> <input name="email" disabled="disabled"> </fieldset> </form> <div></div> <script> $(function(){ $("input:button").addClass("marked"); $("input:image").addClass("marked"); $("input:input").addClass("marked"); $("input:disabled").val("disabled"); }) </script> </body> </html>
8.层级
-1.Child selector(parent -》child)子元素选择器
描述：选择所有指定parent元素中指定的child的直接子元素
语法：$("parent>child")
注：parent：任何有效的选择器
child：用来筛选子元素的选择器
-2.descendant selector(后代选择器)
描述：选择给定的祖先元素的所有后代元素。
语法：$("ancestor descendant")
注：ancestor：任何有效的选择器
descendant：一个用来筛选后代元素的选择器。
-3.next adjacent selector("prev + next")相邻选择器
描述：选择所有紧接在prev元素后的next元素
语法：$("prev + next")
注：prev：任何有效的选择器
next：用于筛选紧跟在prev元素后元素的选择器
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <ul class="topnav"> <li>li1</li> <li>li2 <ul> <li>next l1</li> <li>next l2</li> <li>next l3</li> </ul> </li> <li>li3</li> </ul> <script> $(function(){ $(".topnav>li").css("border","1px solid red"); $(".topnav li").css("border","1px solid red"); $("li + li").css("border","1px solid red"); }) </script> </body> </html>
-4.Next Siblings selector("prev ~ siblings")
描述：匹配prev元素之后所有的兄弟元素。具有相同的父元素，并匹配过滤siblings
语法：$("prev~siblings")
注：prev：任何有效的选择器
siblings：一个选择器来过滤第一选择器以后的兄弟元素。
prev+next和prev~siblings之间最值得注意的不同点是他们各自的可及之范围。前者
只达到紧随的同级元素。后者扩展了该达到跟随其的所有同级元素。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <span id="prev">span</span> <div>div1</div> <div>div2</div> <div>div3 <div>div4</div> </div> <script> $(function(){ $("#prev~div").css("border","1px solid red"); }) </script> </body> </html>
9.过滤可见性过滤
-1.过滤
先选择css选择器，再选择jquery选择器
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> </head> <body> <table border="1"> <tr><td>index 0</td></tr> <tr><td>index 1</td></tr> <tr><td>index 2</td></tr> <tr><td>index 3</td></tr> </table> <script> $(function(){ $("table tr:even").css("color", "red"); }) </script> </body> </html>
-2.可见性过滤
-1.hidden selector
描述：选择所有隐藏的元素
语法：$(":hidden")
补充：元素可以被认为是隐藏的几个情况：1.它们的css display是none，2.它们是type="hidden"的表单元素，3.它们的宽度和高度为0，4.一个祖先元素是隐藏的，因此该元素不会在页面上显示
-2.visiable selector
描述：选择所有可见的元素。
语法：$(":visiable")
如果元素占据文档中的一定空间，则认为元素是可见的。可见元素的宽度或者高度大于0。所以当元素的visibility：hidden或opacity：0被认为是可见的，因为他们仍然占据空间布局。
不在文档中的元素是被认为隐藏的，jQuery无法知道它们是否可见，因此元素可见性依赖于适用的样式。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。显示元素上做动画，在动画开始处该元素被认为是可见的。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.min.js"></script> <style> .outter{ width: 300px; height:300px; background-color: red; } .inner{ width: 50px; height: 50px; background-color: blue; display: none; } </style> </head> <body> <div class="outter"> <div class="inner"> hidden! </div> </div> <script> $(function(){ $(".outter .inner:hidden").css("display", "block"); }) </script> </body> </html>
10.鼠标事件
1.ckick：点击事件
2.dbclick：双击事件
3.hover：鼠标悬停和离开
4.mousedown：鼠标按下
5.mouseenter：鼠标进入元素
6.mouseleave：鼠标离开元素
7.mousemove：鼠标在元素内移动
8.mouseout：鼠标离开元素(支持事件冒泡)
9.mouseover：鼠标进入元素内(支持事件冒泡)
10.mouseup：鼠标按键被释放
