jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。 如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法 $("#i1").html()的意思是：获取id值为 i1的元素的html代码。 其中 html()是jQuery里的方法。相当于： document.getElementById("i1").innerHTML; 1. jQuery对象转换成DOM对象,用索引取出具体的标签 2. DOM对象转换成jQuery对象,$(DOM对象) # dom对象 => $(dom对象) jquery对象 # jquery对象 => $('li')[0] dom对象 $("#i1").html(); //jQuery对象可以使用jQuery的方法 $("#i1")[0].innerHTML; // DOM对象使用DOM的方法 选择器 1.基本选择器 $("#id") //ID选择器 $("div") //元素选择器 $(".classname") //类选择器 $(".classname,.classname1,#id1") //组合选择器 2.层次选择器 x和y可以为任意选择器 $("x y"); // x的所有后代y（子子孙孙） $("x > y") // x的所有儿子y（儿子） $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y 3.过滤选择器(重点) $("li:first") // 第一个li $("li:last") // 最后一个li $("li:even") // 匹配所有索引值为偶数的元素，从 0 开始计数 $("li:odd") // 匹配所有索引值为奇数的元素，从 0 开始计数 $("li:eq(4)") // 索引等于 4 的li(第五个 li 元素) $("li:gt(2)") // 匹配所有大于给定索引值的元素 $("li:lt(2)") // 匹配所有小于给定索引值的元素 $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li 3.2内容过滤选择器 $("div:contains('Runob')") //包含 Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) $("td:parent") //含有子元素或者文本的元素 3.3可见性过滤选择器 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素 $("li:visible") //匹配所有可见元素 3.4属性过滤选择器 $("div[id]") //所有含有 id 属性的 div 元素 $("div[id='123']") // id属性值为123的div 元素 $("div[id!='123']") // id属性值不等于123的div 元素 $("div[id^='qq']") // id属性值以qq开头的div 元素 $("div[id$='zz']") // id属性值以zz结尾的div 元素 $("div[id*='bb']") // id属性值包含bb的div 元素 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素 3.5状态过滤选择器 $("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配选中的 input $("option:selected") // 匹配选中的 option 4.表单选择器 $(":input") //匹配所有 input, textarea, select 和 button 元素 // $(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":text") //所有的单行文本框 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域 筛选器方法 下一个元素： $("#id").next() $("#id").nextAll() // 下到所有 $("#id").nextUntil("#i2") // 下到某处为止 上一个元素： $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 父亲元素： $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 儿子和兄弟元素： $("#id").children() // 儿子们 $("#id").siblings() // 兄弟们 查找 $("div").find("p") // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 // 等价于$("div p") 筛选 $("div").filter(".c1") // 从结果集中过滤出有c1样式类的 // 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 // 等价于 $("div.c1") .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素 操作标签 样式类 addClass() // 添加指定的CSS类名。 removeClass() // 移除指定的CSS类名。 hasClass() // 判断样式存不存在 toggleClass() // 切换CSS类名，如果有就移除，如果没有就添加。 示例： $("p").css("color", "red"); // 将所有p标签的字体设置为红色 位置操作 offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 示例： $(window).scrollTop(0); // 返回顶部 文本操作 HTML代码： html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容 文本值： text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容 值： val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置多选的checkbox、多选select的值 示例： 获取被选中的checkbox或radio的值： <label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1"> 可以使用： $("input[name='gender']:checked").val() 尺寸： height() // 设置或返回被选元素的高度 width() innerHeight() // 返回元素的高度（包含 padding，不包含 border） innerWidth() outerHeight() // 返回元素的宽度（包含 padding 和 border） outerWidth() // outerWidth(true) 设置true计算margin值 属性操作 用于ID等或自定义属性： attr(attrName) // 返回第一个匹配元素的属性值 attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性 用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。 示例： <input type="checkbox" checked id="i1" value="1"> $("#i1").attr("checked") // checked $("#i1").prop("checked") // true attr的作用范围只限于HTML标签内的属性， 而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。 文档处理 添加到指定元素内部的后面 $(A).append(B) // 把B追加到A $(A).appendTo(B) // 把A追加到B 添加到指定元素内部的前面 $(A).prepend(B) // 把B前置到A $(A).prependTo(B) // 把A前置到B 添加到指定元素外部的后面 $(A).after(B) // 把B放到A的后面 $(A).insertAfter(B) // 把A放到B的后面 添加到指定元素外部的前面 $(A).before(B) // 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 移除和清空元素 .remove() // 从DOM中删除所有匹配的元素。所选元素消失 .empty() // 删除匹配的元素集合中所有的子节点。所选元素还在 替换 $("p:first").replaceWith("Hello world!"); // 规定要插入的内容（可包含 HTML 标签）。 $("<span>Hello world!</span>").replaceAll("p:last"); // 规定要插入的内容（必须包含 HTML 标签）。 克隆 clone() // clone方法加参数true，克隆标签并且克隆标签带的事件 事件 常用事件 click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...}) keydown和keyup、change事件组合示例: <script> var flag = false; // shift按键被按下的时候 $(window).keydown(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = true; } }); // shift按键被抬起的时候 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = false; } }); // 当元素的值改变时发生 change 事件（仅适用于表单字段）。 $("select").change(function (event) { // 如果shift按键被按下，就进入批量编辑模式 // shift按键对应的code是16 // 判断当前select这一行是否被选中 console.log($(this).parent().siblings().first().find(":checkbox")); var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); console.log(isChecked); if (flag && isChecked) { // 进入批量编辑模式 // 1. 取到当前select选中的值 var value = $(this).val(); // 2. 给其他被选中行的select设置成和我一样的值 // 2.1 找到那些被选中行的select var $select = $("input:checked").parent().parent().find("select") // 2.2 给选中的select赋值 $select.val(value); } }); </script> hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。 方法触发 mouseenter 和 mouseleave 事件。 注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。 $("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); }); 事件绑定 .on( events [, selector ],function(){}) // 使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。 events： 事件 selector: 选择器（可选的） function: 事件处理函数 示例： $("table").on("click", ".delete", function () { // 绑定的事件... }) 移除事件 .off( events [, selector ][,function(){}]) off() 方法移除用 .on()绑定的事件处理程序。 events： 事件 selector: 选择器（可选的） function: 事件处理函数 阻止后续事件执行 return false; // 常见阻止表单提交等 e.stopPropagation(); // 阻止事件冒泡(层级触发) e.preventDefault(); // 阻止默认事件 示例： <div><p><span>点我</span></p></div> <script> $("span").click(function (e) { alert("span"); // e.stopPropagation(); return false; }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> 页面加载完成再执行javascript的三种方式 当DOM载入就绪 可以查询及操纵时绑定事件。 $(document).ready(function(){ // myfunc(); }) 简写： $(function(){ // 你在这里写你的代码 }) // window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用 // jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数） 示例： <script> function Fa() { // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树 var $f1 = $("#f1"); } // 文档树就绪后执行 $(document).ready(function () { Fa(); }); </script> 动画效果 语法： $(selector).xxx(speed,callback); // 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 // 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 隐藏、显示： hide() 和 show() toggle() hide和show实例： $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(1000,function(){ alert('ssss'); }); }); toggle实例(在hide与show之间切换): $("button").click(function(){ $("p").toggle(); }); 淡入淡出： fadeIn $("button").click(function(){ $("#div3").fadeIn(3000); }); fadeOut $("button").click(function(){ $("#div2").fadeOut("slow"); }); fadeToggle // 切换fadeIn与fadeOut $("button").click(function(){ $("#div3").fadeToggle(); }); fadeTo() 方法 jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 语法: $(selector).fadeTo(speed,opacity,callback); 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 可选的 callback 参数是该函数完成后所执行的函数名称。 实例 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); }); 滑动方法： // 用法同上 slideDown() slideUp() slideToggle() 动画 - animate() 方法 语法： $(selector).animate({params},speed,callback); // 必需的 params 参数定义形成动画的 CSS 属性。 // 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。 // 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ 示例： $("button").click(function(){ $("div").animate({left:'250px'}); }); // 操作多个属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', '150px' }); }); 使用相对值 // 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 实例 $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', '+=150px' }); }); 使用队列功能 编写多个 animate() 调用，jQuery 会创建包含这 些方法调用的"内部"队列。然后逐一运行这些 animate 调用。 示例： $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); 可以用 animate() 方法来操作所有 CSS 属性吗？ 使用驼峰属性名，比如，marginRight 而不是 margin-right， 如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。 注：但...咱可以在回掉函数中简单改变color属性 each jQuery.each(collection, callback(indexInArray, valueOfElement))： 描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度 属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。 li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 }) 输出： 010 120 230 340 .each(function(index, Element))： 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。 .each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作 为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总 是指向这个元素。 // 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); // $("li").addClass("c1"); // 对所有标签做统一操作 }); 在遍历过程中可以使用 return false提前结束each循环。 .data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 .data(key, value): 描述：在匹配的元素上存储任意相关数据。 $("div").data("k",100);//给所有div标签都保存一个名为k，值为100 .data(key): 描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。 $("div").data("k");//返回第一个div标签中保存的"k"的值 .removeData(key): 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。 $("div").removeData("k"); //移除元素上存放k对应的数据