day 47 jQuery
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery。那么他就可以使用jQuery里的方法；例如$("#d1").html()
$("#d1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
01. 标签查找
-
基本选择器
// id选择器 $("#id") // 标签选择器 $("TagName") // class选择器 $(".class") // 配合使用 $("div.c1") // 找到有c1 class类的div标签 // 所有元素选择器 $("*") // 组合选择器 $("#id, .class, TayName") -
层级选择器
x和y可以为任意选择器
$("x y"); // x的所有后代y $("x > y"); // x所有子代的y $("x ~ y"); // x下面同级的y $("x + y"); // x下面紧挨着的y -
基本筛选器
-
first
$("div span:first") // div标签内部第一个span标签 -
last
$("div>span:last") // div标签内部最后一个span子标签 -
eq
$("div~span:eq(2)") // div同级下面的span标签中索引值为2的标签 -
even & odd
$("div:even") // 匹配所有div标签，保留索引值为偶数的(0、2、4...) $("div:odd") // 匹配所有div标签，保留索引值为奇数的(1、3、5...) -
gt & lt
$("div:gt(5)") // 匹配所有div标签，保留索引值大于5的 $("div:lt(5)") // 匹配所有div标签，保留索引值小于5的 -
not
$("div:not(".c1")") // 获取没有c1 class值的div标签 -
has
$("div:has(input)") // 匹配内部含有input标签的div标签
-
-
属性选择器
<input type="text" enabled> <input type="checkbox"> $("input[enabled]") // 筛选含有type属性的input标签 $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签 -
表单筛选器
-
text & password & file & radio & checkbox & submit & reset & button
$(":text") // 找到所有text类型的input标签 -
enabled & disabled & checked & selected
$("input:disabled") // 找到禁用的input标签 $(":checked") // 找到被选中的option标签,会将selected也选中
-
02. 筛选器方法
-
下一个元素
$("#d1").next() // 找到id为d1的下一个标签 $("#d1").nextAll() // 找到d1下面所有的标签 $("#d1").nextUntil("#d3") // 找到d1下面所有的标签到id为d3为止，不包含d3 -
上一个元素
$("#d1").prev() // 找到id为d1的上一个标签 $("#d1").prevAll() // 找到d1上面所有的标签 $("#d1").prevUntil("#d3") // 找到d1上面所有的标签到id为d3为止，不包含d3 -
父亲元素
$("#d1").parent() // 找到id为d1的父标签 $("#d1").parents() // 查找当前元素的所有的父辈标签 $("#d1").parentsUntil("#d2") // 查找当前元素的所有的父辈标签，直到遇到id为d2的标签。 -
下一级和同级
$("#d1").children(); // 儿子们 $("#d1").siblings(); // 兄弟们,上下都算 -
后代元素
$("#d1").find("p"); // 找到id为d1标签内部的p标签 $("#di p") // 效果相同 $(this).find("p"); // 多用于事件触发功能内部，查找当前对象内部对象使用 -
筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的 -
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素 $("div").first() == $("div:first")
03.操作标签
-
样式操作
样式类
$("#d1").addClass("c1");// 添加指定的CSS类名。 $("#d1").removeClass("c1");// 移除指定的CSS类名。 $("#d1").hasClass("c1");// 判断样式存不存在 $("#d1").toggleClass("c1");// 切换CSS类名，如果有就移除，如果没有就添加。 .css("color","red") -
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移 $(window).scrollTop(100) -
尺寸
height() width() innerHeight() innerWidth() outerHeight() outerWidth() -
文本操作
// text $("div").text() // 获取所有，内部文本 $("div").text("abc") // 覆盖所有，内部文本 // html $("div").html() // 获取第一个匹配元素的，内部文本和标签 $("div").html("123") // 覆盖所有匹配元素，内部文本和标签 // value val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val([val1, val2]) // 设置多选的checkbox、多选select的值<input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <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"> <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <script> $("[name='hobby']").val(['basketball', 'football']); $("#s1").val(["1", "2"]) $("input[name='gender']:checked").val() </script> -
属性操作
-
用于id等或自定义属性
attr(attrName) // 返回第一个匹配元素的属性值 $("p").attr("id"); // 获取p标签等id值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 $("#d1").attr("usernaem","jason"); // 为id值为d1的标签添加username属性值为jason attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 $("#d1").attr({"usernaem":"jason","password":"123456"}); removeAttr() // 从每一个匹配的元素中删除一个属性 $("#d1").removeAttr("usernaem"); // 删除username属性 // attr() 内部什么都不加会报错 -
用于checkbox和radio
prop() // 获取属性 $("input").first().prop("checked","checked") // 为标签设置选中 $("input").first().prop("checked",false) // 为标签去掉选中 // 对于标签上有的能看到的属性和自定义属性都用attr // 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
-
-
文档处理
- 添加到指定元素内部的后面
$(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()// 删除匹配的元素集合中所有的子节点。- 替换
replaceWith() replaceAll()- 克隆
clone()// 参数 // 事例 $("button").on("click", function () { $(this).clone(true).insertAfter(this); }); // clone不加true，只克隆标签本身和样式，不克隆事件
04.事件
-
常用事件
$("#d1").click(function(){...}) // 点击 $("#d1").hover(function(){...}) // 鼠标悬浮 $("#d1").blur(function(){...}) // 元素失去焦点 $("#d1").focus(function(){...}) // 元素获得焦点 $("#d1").change(function(){...}) // 域的内容被改变 $("#d1").keyup(function(){...}) // 某个按键被松开 $("#d1").scroll(function(){...}) // 监视滚动条 -
事件绑定与移除
$("button").on( events, [ selector ],function(){}) // 绑定 $("button").off( events, [ selector ],function(){}) // 移除 events： 事件 selector: 选择器（可选的） function: 事件处理函数 // 在jQuery中定义的hover这种DOM中没有的事件不能通过on的方式绑定 $("#d1").hover(function(){...}) $("#d1").click(function(){...}) $("#d1").on("click",function(){...}) -
阻止后续事件执行
$().hover(function(e){ ... return false; // 方式一 e.preventDefault(); // 方式二 }) -
阻止事件冒泡
$().hover(function(e){ ... e.stopPropagation(); }) -
js文件书写位置，解决页面加载问题
-
将js事件代码写到
window.onload = function(){ // 代码 } -
jQuery中
$(document).ready(function(){ // 代码 }) $(function(){ // 代码 }) // 将代码写到body最下方 （最优）
-
-
事件委托
$("body").on("click", "button", function () { // 将点击事件委托给内部的多个button按钮，让后续动态创建的标签也有事件 })
05.动画效果
-
基本，左上角缩放
show([s,[e],[fn]]) // 显示 hide([s,[e],[fn]]) // 隐藏 toggle([s],[e],[fn]) // 显示则隐藏，隐藏则显示 -
滑动，上下滑动
slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) -
淡入淡出
fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) -
自定义
animate(p,[s],[e],[fn]) -
参数详解
s(speed);三种预定速度之一的字符串（'slow'，'normal'，'fast'）或表示动画时长的毫秒数值 e(easing);(Optional)用来指定切换效果，默认是"swing",可用参数'linear' fn;在动画完成时执行的函数，每个元素执行一次 o(opacity);（用户fadeTo）一个0～1之间的透明度 p(params);一组包含作为动画属性和终值的样式属性和其值的集合 -
动画控制
stop([c],[j]) // 停止所有在指定元素上正在运行的动画 delay(d,[q]) // 设置一个延时执行队列中之后的项目 finish([queue]) // 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画 jQuery.fx.off = true; // 关闭页面上所有的动画
06.补充
-
each
// 一个通用的迭代函数，它可以用来无缝对接迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//i是索引，v是每次循环的具体元素。 })// 遍历一个jQuery对象，为每个匹配元素执行一个函数 $("li").each(function(){ $(this).addClass("c1"); // 为每一个li标签添加c1 class值 }); $("li").addClass("c1"); // 对所有标签做统一操作，这样效果相同 return false; // 提前终止循环 -
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对应的数据