[TOC] # JQuery认识 ## 1.入口函数 执行时机是在文档（标签）加载完毕后立马执行函数里面的代码 ，不存在覆盖问题（调用函数） **跟window.onload的执行时机不一样（页面所有资源加载完毕后执行）后写的入口函数会覆盖前面写的函数** **完整写法** $(document).ready(function){ 代码块； } **简写** 第一种： $().ready(function){ 代码块； } 第二种： $(function(){ 代码块； } ) ***** **所有的$都可以用jQuery代替** ***** &("#id") JQ对象（默认情况下不能调用原生的属性和方法） document.getElementById("box") DOM对象（默认情况下只能调用原生的JS属性和方法） ###1.0 转换对象 #### 1.0.1 **JQ对象转换为DOM对象** $("#box")[0].style.backgroundColor = "red"; $("#box").get(0).style.backgroundColor = "red"; **ps： $("#box")得到的是个数组** ***** #### 1.0.2 **DOM对象转为JQ对象** var divObj = document.getElementById("box); $(divObj).show(); ### 1.1.格式举例 ``` $(function(){ $("button:eq(0)").click(function(){ $("div").show(400)； })； }) ``` ### JQuery函数 **html()：** 访问html,显示标签 ，修改值时会对标签起作用 **text（）：** 访问text，只打印文字内容 ，修改值时会直接把标签当初是文本内容修改  ##2选择器 ### 2.1基本选择器 **分类:** ID选择器、类选择器、标签选择器、并集选择器和通配符选择器。  ``` ~~~ <button>选择所有段落标签</button> <button>选择class为left的标签</button> <button>选择id为box的标签</button> <button>选择所有不分类型标签</button> <button>选择所有标题标签</button> <button>选择ul里面的li标签</button> <button>选择body下的第一级所有标签并添加边框</button> <button>选择p后的一个div</button> <button>选择p后的所有div</button> <p>段落标签</p> <p>段落标签</p> <p>段落标签</p> <div class="left">类选择器</div> <div class="left">类选择器</div> <div id="box">id选择器</div> <h1>标题1标签</h1> <h2>标题2标签</h2> <h3>标题3标签</h3> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> ~~~ $("button:eq(0)").click(function () {/*所有的p标签*/ $("p").css("background-color", "red"); }); $("button:eq(1)").click(function () {/*class类名为left*/ $(".left").css("background-color","red"); }); $("button:eq(2)").click(function () {/*id名为id*/ $("#box").css("background-color","pink"); }); $("button:eq(3)").click(function () { $("*").css("background-color","pink");/*所有不分标签类型的标签 通配符 所有包括body*/ }); ~~~ ``` ### 2.2.层级选择器 **分类** 后代选择器 、 直接后代选择器 、 下一个相邻兄弟和后面所有兄弟元素  ``` ~~~ $("button:eq(5)").click(function () { /*后代选择器*/ $("ul li").css("background-color","red"); }); $("button:eq(6)").click(function () {/*选择body下的第一级所有标签并添加边框 直接后代选择器*/ $("body>*").css("border","1px solid red"); }); $("button:eq(7)").click(function () {/*p后的第一个div 中间不能有别的标签隔开.否则会未选择到任何标签 下一个相邻的兄弟*/ $("p+div").css("border","1px solid red"); }); $("button:eq(8)").click(function () { /*后面所有的兄弟*/ $("p~div").css("border","1px solid red");/*p后所有的div。如果中间有别的标签也可以获取到后面所有的div*/ ~~~ ``` **拓展选择方法:** 在通过$(" ")选择到元素后，可以通过： prev() 获取上一个相邻兄弟 prevAll() 获取 前面所有兄弟 next() 获取下一个相邻兄弟 nextAll() 获取后面所有兄弟 ### 2.3基本筛选选择器 eq后的值是指确定的值  ``` ~~~ $(function () { $("button:eq(0)").click(function () { $("li:first").css("background-color","pink"); }); $("button:eq(1)").click(function () { $("li:last").css("background-color","pink"); }); $("button:eq(2)").click(function () {/*选择所有的排除最后一个*/ $("li:not(:last)").css("background-color","pink"); }); $ ("button:eq(3)").click(function () { $("li:not(:eq(1))").css("background-color","pink");/*选择所有排除第二个*/ }); $("button:eq(4)").click(function () { $("li:even").css("background-color","pink");/*索引值为偶数的*/ }); $("button:eq(5)").click(function () { $("li:odd").css("background-color","pink");/*索引值为奇数*/ }); $("button:eq(6)").click(function () { $("li:gt(4)").css("background-color","pink");/*大于5的li &gt;>*/ }); $("button:eq(7)").click(function () { $("li:lt(4)").css("background-color","pink");/*小于5的li &lt;<*/ }); $("button:eq(8)").click(function () { $("li:eq(4)").css("background-color","pink");/*等于5的li*/ }); ~~~ ``` ### 2.4内容筛选选择器 根据元素中的文字内容或所包含的子元素特征获取元素 （可模糊匹配）  ``` ~~~ $(function () { $("button:eq(0)").click(function () { $("div:contains('天')").css("background-color","red");/*带有天字的*/ }); $("button:eq(1)").click(function () { $("div:empty").css("background-color","pink");/*空的标签*/ }); $("button:eq(2)").click(function () { $("div:parent").css("background-color","red");/*选择含有子元素或者是文本的div元素*/ }); $("button:eq(3)").click(function () { $("div:has('span')").css("background-color","red");/*带有span标签的元素*/ }); }) ~~~ ``` ### 2.5 属性筛选选择器 根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。  ### 2.6父子兄选择器 **分类** parent() 获取当前标签的父节点 parents() 获取当前标签的祖先节点 parentsUntil() 获取当前标签的祖先节点直到… (不包含该标签) children() 获取当前标签的子节点 siblings() 获取当前标签的兄弟节点 ``` ~~~ <button>点击选中</button> <div class="one"> <div class="box"> <div class="box-in">我是父亲 <span class="active">我是孙子</span> </div> </div> </div> ~~~ <script> $("button:eq(0)").click(function () { // $(".active").parent().css("background-color","blue");/*父亲*/ /*parents()里面不写值会默认把所有的祖先都改变 可指定祖先*/ // $(".active").parents().css("background-color","blue"); // $(".active").parents(".box").css("background-color","blue");/*会包括指定的祖先*/ $(".active").parentsUntil(".one").css("background-color","blue"); /*一级一级祖先往上找，知道找到指定标签为止（不包含指定标签）*/ $(".active").siblings().css("background-color","black");/*兄弟节点*/ }) </script> ~~~ ``` ##3.事件 click() 点击事件 noConflict() 转换 把$转换为jq (解决命名冲突) mouseenter() 鼠标 经过事件 mouseleave() 鼠标离开事件 hover() 如果同时出现上面两个时间可以用hover代替 两个参数（函数） ***** **鼠标经过离开事件例子 四种写法** ``` ~~~ // 第一种 $(".nav>ul>li").mouseenter(function () { $(this).children("ul").show();//事件源的ul孩子 }); $(".nav>ul>li").mouseleave(function () { $(this).children("ul").hide(); }); //第二种 $(".nav>ul>li").mouseenter(function () { $(this).children("ul").show(); }).mouseleave(function () { $(this).children("ul").hide(); }); // 第三种 $(".nav>ul>li").hover(function () {/*两个参数 分别是两个函数*/ $(this).children("ul").show(); },function () { $(this).children("ul").hide(); }) //第四种 $(".nav>ul>li").hover(function () {/*鼠标的离开和进入可以当做是显示隐藏的切换效果*/ $(this).children("ul").toggle(); }); ```