$(“div[id!=‘div2’]”).css(“color”,“yellow”); 4. 目标[属性名^=‘属性值’] 目标指定的属性名， 是以指定的属性值开头的 $(“div[id^=‘d’]”).css(“background”,“blue”); 5. 目标[属性名$=‘属性值’] 目标指定的属性名 是以指定的属性值结尾的 ( " d i v [ i d ("div[id("div[id=‘2’]").css(“fontSize”,“30px”); 6. 目标[属性名*=‘属性值’] 目标指定的属性名 只要包含指定的属性值 $(“div[id*=‘iv’]”).html(“我们都被改了”); 7. id $(“#box”) 8. class $(“.box”) 9. 标签名 $(“div”) 10. 通用选择器 $(“*”); 11. 层级选择器 $(“div>span”); 12. 后代 $(“div span”); 13. 连续的子代 $(“div>span>span”); 14. 群组选择器 $(“div,p”); 15. 交叉选择器：两个条件必须同时满足 $(“#btn.box”); 16. 紧邻选择器： 条件1: 紧挨着制定目标 (这里的指定目标： .box) 条件2： 需要在目标的下方书写 $(“.box+p”); 17. 同辈选择器（同级选择器,同胞选择器) 可以获取到目标下方 所有的元素(无论是否紧邻) $(“.box~p”);
过滤选择器：
1. :first 匹配到第一个符合条件的元素 $(‘li:first’).css(“background”,“yellow”); 2. :last 匹配到最后一个符合条件的元素 $(‘li:last’); 3. :not 除了()中指定的条件，获取:前指定的所有元素， $(“li:not(.list)”); 4. :even 索引为偶数的 $(“li:even”); 5. :odd 索引为奇数 $(“li:odd:not(.list)”); 6. :eq(指定索引值) $(“li:eq(0)”); 7. :gt(大于索引值) $(“li:gt(1)”); 8. :lt(小于索引值) $(“li:lt(5)”);
后代选择器和 find()方法：
$(“p span”).html(“我被html方法改了”); $(“p”).find(“span”).css(“background”,“red”);
子元素选择器和 children 方法：
$(“p>span”).css(“color”,“blue”); $(“p”).children().css(“fontSize”,“30px”);
紧邻选择器和 next()方法、nextAll() 方法：
$(“.d+button”).html(“点我”); $(“.d”).next().css(“color”,“blue”); $(“.d”).nextAll(“button”).html(“哈哈哈”);
prev 方法、prevAll 方法：
$(“.d”).prev().html(“我是新来的div”); $(“.d”).prevAll().html(“我是新来的div”);
siblings 方法：
$(“.d”).siblings(“button”);
parent([expr])方法：
用一个包含着所有匹配元素的唯一父元素的元素集合。
$(‘#item1’).parent().parent；
parents方法：
//得到含有子元素或者文本的元素 1.$(‘li:parent’); 2.parents([expr])； //得到一个包含着所有匹配元素的祖先元素的元素集合。 //可以通过一个可选的表达式进行筛选。 $(‘#items’).parents(‘.parent1’);
closest([expr])方法：
closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。
如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。
如果什么都没找到则返回一个空的jQuery对象。
jq操作DOM
=================================================================
创建节点：
var 
li=li = (“
- 榴莲
- ”);添加节点：方法：
- appendTo：将内容添加到目标 中 的最后一位
- 内容.appendTo(目标);
l i . a p p e n d T o ( li.appendTo(li.appendTo((“ul”));
$(“ - 芒果
- ”).appendTo(“ul”);
- prepend：将内容添加到目标 的第一位
- 目标.prepend(“内容”)
$(“ul”).prepend(“ - 西瓜
- ”);$(“ul”).prepend(“
- 椰子
- ”);
- after：在指定的元素之后 插入元素
- 目标.after(内容);
$(“.box”).after(“上面卖的是假货”);
- insertAfter：将内容添加到目标之后
- 备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置
内容.insertAfter(目标) :
( " u l " ) . i n s e r t A f t e r ( ("ul").insertAfter(("ul").insertAfter((“.box”));
- before：在指定的元素之前 插入元素
- $(“.box”).before(“我是新来的span”);
- insertBefore：将内容添加到目标之前
- 备注： 如果该内容是页面已有元素，这些元素会被移动到指定的位置
( " . s " ) . i n s e r t B e f o r e ( (".s").insertBefore((".s").insertBefore((“.box”));
删除节点：
作用： 删除该节点
指定目标.remove()
$(“.s”).remove();
清空目标子节点：
作用： 清空目标的子节点，但不对目标自身造成影响
目标.empty()
$(“ul”).empty();
复制：
作用： 会返回指定目标的复制体，需要接受或者直接使用
目标.clone()
var
b=b = (“.box”).clone();
- jq动画效果
================================================================
hide：
作用： 让目标隐藏（修改的display属性）
目标.hide()
小括号中，可是设置动画执行的时间
$(“.box”).hide(‘slow’);
show：
作用： 让目标显示
目标.show()
小括号中，可以设置动画执行的时间
$(“.box”).show(5000);
toggle：
作用： 会先进行目标的属性，如果是显示，就设置为隐藏，
如果是隐藏，就设置为显示
目标.toggle()
$(“.box”).toggle(2000);
淡入：
$(“.box”).fadeIn(2000);
淡出：
$(“.box”).fadeOut(2000);
淡入、淡出：
$(“.box”).fadeToggle(2000);
渐变到指定的透明度：
参数1 ： 执行的时间
参数2 : 指定的透明度
$(“.box”).fadeTo(2000,0.3);
滑入：
$(“.box”).slideDown(2000);
滑出：
$(“.box”).slideUp(2000);
滑入、滑出：
$(“.box”).slideToggle(2000);
animate自定义动画：
(“.text:first”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () {(“.text:first”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () {(“.text:first”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () { (this).animate({ fontSize:“16px” },1000) (“.text:eq(1)”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () {(“.text:eq(1)”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () {(“.text:eq(1)”).animate({ ‘opacity’:1, fontSize:“40px” },3000,function () { (this).animate({ fontSize:‘16px’ },1000) }) })
- jq事件绑定
================================================================
jq 历史中绑定事件的三种方式：
- on/off
- bind/unbind
- live/delegete
- 备注：
在JQuery 1.7之后 推出了 .on() 和 .0ff()方法 废弃了live() 和 delegete()方法
on/off 整合了 bind/unbind 方法
所以我们使用较多的绑定方法为 on/off
方法： .on
参数：
参数 1 事件类型 （必填）
可以同时绑定多个事件，但限于事件功能相同时
事件功能不相同时，可以采用链式编程，在该方法的后面续写
参数 2 具体执行功能的 子元素！ (可选)
参数 3 传递到函数内部的数据(有些类似实参) （可选）
参数 4 具体功能 (必填)
语法示例：
$(“.box”).on(“click mouseout”,“.min_box”,{sum:20},function(e){ console.log(“天气不错”); //通过参数3 传递进来的参数 我们通过 event.data 来获取 console.log(e.data.sum); });
- 通过on绑定事件和直接通过事件名绑定 的区别：
通过事件名绑定 是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；
而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。
简单概述区别： 通过事件名添加的话 新元素 不能获得同样的事件 而通过on绑定的话可以
读取和使用鼠标状态：==
$(‘button’).mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false; //阻止链接跳转 return true; //返回正常的处理结果. return false; //返回错误的处理结果;终止处理;阻止提交表单; //阻止执行默认的行为. return; //把控制权返回给页面. })
- 使用对象的方式 绑定多个事件：
$(“button”).on({ mousedown:function () { alert(“按下”); }, mouseup:function () { alert(“抬起”) } })
- 阻止冒泡和默认行为：
$(“button”).on(‘click’,function (e) { //阻止默认事件 e.preventDefault(); //阻止冒泡事件 e.stopPropagation(); })
- 事件的命名空间：
为什么存在： 有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决。
$(‘input’).on(‘click.abc’, function () { alert(‘abc’); });
- .off() 解除事件绑定：
参数1 ：必需 符合要解除目标的 事件类型 事件命名
参数2 ：可选 指定哪些后代元素可以触发绑定的事件
参数3 ：可选。规定当事件发生时运行的函数。
$(‘input’).off(‘click.abc’); //移除 命名为abc的click 事件
备注：
也可以直接使用(’.abc’) 这样的话 可以移除相同命名空间的不同事件。
对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。
如果该事件已经删除，则无法模拟使用
$(‘input’).trigger(‘click.abc’);
- 事件绑定叠加问题：
var iCount = 0; function sayHello() { alert(“Hello!”); } 每Click1次，多响应事件一次（叠加了） (‘.btn3’).on(‘click’, function () { iCount = iCount + 1;(‘.btn3’).on(‘click’, function () { iCount = iCount + 1;(‘.btn3’).on(‘click’, function () { iCount = iCount + 1; (“.box”).html(“Say Hello” + iCount + “次”);
