jQuery

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

jQuery优势

动画子元素查找childrenAjax浏览器兼容

页面加载事件

window.onload$(document).ready()执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完编写个数同一页面不能编写多个同一页面能编写多个简化写法无$(function(){//执行代码}) ;

jQuery语法结构

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象,“$”等同于“ jQuery ”选择器 selector：获取需要操作的DOM 元素方法action()：jQuery中提供的方法,操作可以连写 $("h2").css("background-color","#CCFFFF").next().css("display","block");

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象var $txtName =$ ("#txtName"); //jQuery对象 var txtName =$txtName[0]; //DOM对象 通过get(index)方法得到相应的DOM对象var $txtName =$("#txtName"); //jQuery对象 var txtName =$txtName.get(0); //DOM对象

选择器:和css一样

过滤选择器:使用":"

语法构成描述:first频等）才能执行:last选取最后一个元素:even选取索引是偶数的所有元素（index从0开始）:odd选取索引是奇数的所有元素（index从0开始）:eq(index)选取索引等于index的元素（index从0开始）:gt(index)选取索引大于index的元素（index从0开始）:lt(index)选取索引小于index的元素（index从0开始）:not(selector)选取不是selector的元素:header选取所有标题元素，如h1~h6:focus选取当前获取焦点的元素:visible选取所有可见的元素:hidden选取所有隐藏的元素$(" p:hidden").show(); //获取隐藏的<p>元素，使其显示 $(" p:visible").hide(); //获取显示的<p>元素，使其隐藏

转义:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id#a");->("#id\#a");

样式设置

使用css()为指定的元素设置样式值

$(this).css("border","5px solid #f5f5f5");

追加和移除样式

addClass(class)或addClass(class1 class2 … classN)

removeClass(“style2 ”)或removeClass("style1 style2 ")

toggleClass(class)模拟了addClass()与removeClass()实现样式切换的过程

html()可以对HTML代码进行操作，类似于JS中的innerHTML

没有参数为获取第一个匹配元素的HTML内容或文本内容

有参数为用于设置所有匹配元素的HTML内容或文本内容

$("div.left").html("<div class='content'>…</div>");

text()可以获取或设置元素的文本内容

没有参数为获取所有匹配元素的文本内容

有参数用于设置所有匹配元素的文本内容

$("div.left").text("<div class='content'>…</div>");

val()可以获取或设置元素的value属性值

事件

事件注册

$(对象).事件名(事件处理函数)

绑定事件:bind()方法和on方法()

$("input[name=event_1]").on({ mouseover: function () { $("ul").css("display", "none"); }, mouseout: function () { $("ul").css("display", "block"); } });

移除事件:unbind()方法和off()方法

//off()方法通常用于移除通过 on() 方法添加的事件处理程序 <p>点击这个段落修改它的背景颜色</p> <p>点击一下按钮再点击这个段落( click 事件被移除 )</p> <button>移除 click 事件句柄</button> <script type="text/javascript"> $(document).ready(function(){ $("p").on("click",function(){ $(this).css("background-color","pink"); }); $("button").click(function(){ $("p").off("click"); }); }); </script> //unbind():移除所有 p 元素的事件处理器 <p>这是一个段落</p> <p>这是另一个段落</p> <p>点击任何段落可以令其消失。包括本段落。</p> <button>删除p元素的事件处理器</button> <script type="text/javascript"> $(function () { $("p").click(function () { $(this).slideToggle(); }); $("button").click(function () { $("p").unbind(); }) }) </script>

委托事件:delegate()

$(对象).delegate(子元素名,事件名,处理函数）

有些元素是代码动态生成,没办法添加事件,所以委托给父元素,事件冒泡

利用事件冒泡机制实现委托,只指定一个事件处理程序来管理某一类型的所有事件,提高事件处理的性能

<ul id = "lists"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> //1.on方法 $(function () { $("#lists").on("click","li",function (event) { $(event.target).css("background-color","red"); }) }); //2.delegate方法 $(function () { $("#lists").delegate("li","click",function (event) { $(event.target).css("background-color","red"); }) }); //3.bind方法:只能给已经存在DOM元素添加事件，不能给未来存在DOM元素添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话,用on() $(function () { $("#lists").bind("click","li",function (event) { let target=$(event.target); //prop() 方法设置或返回被选元素(DOM属性)的属性和值,如需检索HTML属性,使用attr()方法代替。 if(target.prop("nodeName")=="LI"){ target.css("background-color","red"); } }) })

主动触发事件

$(对象).trigger( type )

<input type="text" name="FirstName" value="Hello World" /> <br/> <button>激活input域的select事件</button> <script type="text/javascript"> $(function () { $("input").select(function () { this.after("文本被选中!"); }); $("button").click(function () { $("input").trigger("select"); }); });

事件参数

事件参数可以提供事件处理函数需要的数据 键盘事件提供当前按键编码参数鼠标事件提供鼠标当前坐标参数普通事件提供数据对象作为参数，事件处理函数通过data属性获取