前端——jQuery

$("#id") 

<div class="c1"></div>$(".c1")

$("a") // 找到所有a标签

<div id=‘i10‘ class=‘c1‘><a>f</a><a>f</a></div><div class=‘c1‘><a>f</a></div><div class=‘c1‘><div class=‘c2‘> </div></div>$("a,.c2,#i10") ?相当于 ?$("a") + $(".c2") + $("#i10")

$("#i10 a") 将id=i10的标签下所有后代a标签找出来$("#i10>a") 只找子标签，不找孙标签$("#i10+a") 找到#i10后面的所有a标签（兄弟+兄弟的后代，不包括自己的后代）$("#i10~a") 找到所有与#i10同层的a兄弟标签

:first 在选择出来的若干个标签中选择第一个:last ?最后一个:even ?奇数:odd ??偶数:eq() ?括号里写索引值，从0开始:gt() ?索引大于:lt() ?索引小于

自定义了bob属性时，$("[bob]") ???????????找出所有具有bob属性的标签$("[bob=‘123‘]") ?????找出bob属性为123的标签

$("input[type=‘text‘]")$(":text")两者完全等价，后者是一个简写

$(this).next() ?????????下一个 ?????????nextAll() ??????后面的所有标签 ?????????nextUntil("") 向后直到某标签$(this).prev() ?????????上一个 ?????????prevAll() ??????前面所有的标签 ?????????prevUntil("") 向前直到某标签$(this).parent() ?????父标签$(this).children() ????所有子标签(在children的括号内也可以进一步筛选)如：children("[a=‘123‘]")$(this).siblings() ?????所有兄弟标签（不包括自己）

first() ?第一个last() ??最后一个find("") ?找到具有某样式的标签hasClass("") 判断是否具有某样式.eq("")与选择器eq功能相同，只是写法不同

$(‘#tb:checkbox‘).each(function(k){ ?// .each() 是jQuery使用的循环// k当前索引// this代指当前循环的每一个元素，为DOM对象var v = $(this).prop("checked") ? false : true;$(this).prop("checked",v);})jQuery方法内置循环： $(‘#tb:checkbox‘).操作

$("input[type=‘123‘]").click(函数名或匿名函数); ??????????????????jQuerydocument.getElementById("").onclick = 函数名或匿名函数; ??DOM

.addClass("样式"); ?????增加某样式(力度大).removeClass("样式"); ??删除某样式.hasClass("样式"); ?????判断是否具有某样式，返回true或false.toggleClass("样式") ???多次执行时，交错地删除或添加某样式

.css("color"); ????????获取color样式的值
.css("display","none") 设置样式（力度小）

// 在DOM中，能够以innerText获取文本的操作在jQuery中都用 text()方法.text() ?????????获取文本内容.text("内容") ???设置文本内容.html() ??????获取标签内容.html("<a>内容</a>") ?或 .html("内容") ???设置文本内容，效果与上面相同// 部分标签，如<input>,<select>,<textarea>标签 等原本是value的在这里都是val().val() ??????????获取文本.val("内容") ?设置文本

// 可以用做自定义属性
.attr("value") ????获取属性的值（传入属性名）.attr("value","1") 设置值（传两个参数）,可以新增、修改属性.removeAttr("") ???删除属性// 专门用于checkbox，radio获取、设置值.prop("checked",true)

if( typeof(对象.attr("属性")) == "undefined" )

.index() 获取此标签在父标签下的索引，常与eq一起用 ?

.append("<a>123</a>") ?在内部创建标签，添加到末尾.prepend("<a>123</a>") 添加到内部最前面.after("") ???创建兄弟标签，紧随其后.before("") ??创建兄弟标签，紧随其前.remove() ?删除标签.empty() ??仅删除内容，不删除标签.clone() ??克隆一份 // 如果只克隆标签而不安排位置，标签不会显示出来

.scrollTop() ?获取/调整当前浏览的上下位置.scrollLeft() 获取/调整当前浏览的水平位置window是DOM对象，表示整个浏览页面窗口$(window).scrollTop() ????获取当前浏览相对于整个窗口的位置$(window).scrollTop(0) ??返回顶部 ?.offset() ?????????获取指定标签在html中的坐标.offset().top ???距离顶部的坐标.offset().left ???距离左边的坐标.position() ??获取指定标签相对于父标签的坐标(相当于在父标签中relative,子标签中absolute) ???????.height() ????????????????获取标签的纯高度.innerHeight() ????????纯高度 + 内边距.outerHeight() ????????纯高度 + 内边距 + 边框.outerHeight(true) ??纯高度 + 内边距 + 外边距 + 边框

// 在html中写Onclick事件绑定函数。html：<a onclick="A();" href="http://www.baidu.com">点击啊</a>JS： ??function A(){alert(‘123‘);return false;};// 在js代码中绑定点击事件函数$("a").click(function(){ ???alert(‘123‘); ???return false;});两种方式效果相同，且针对 a标签 和 submit 都一样。

 ???<input id="t1" type="text" /> ???<input id="a1" type="button" value="添加" /> ???<ul id="u1"> ???????<li id="s1">1</li> ???????<li>2</li> ???</ul>　　<script src="jquery-3.3.1.js"></script><script> ???$(‘#a1‘).click(function () { ???????var v = $(‘#t1‘).val(); ???????var temp = "<li>" + v + "</li>"; ???????$(‘#u1‘).append(temp); ???});</script>

 ???<input id="btn1" type="button" value="点击1" /> ???<input id="btn2" type="button" value="点击2" /> ???<a id="a1" href="#">CodePlayer</a>

.bind("type", {data}, function) 　　参数： type：必需。绑定事件的类型。可以绑定多个，用空格隔开。　　　　　 data：可选。传入参数，字典的形式。　　　　　 function：必需。执行函数　　我们常用的.click() .mouse()等方法，是bind()的简写。.unbind("type", function) ?删除由bind()方法添加的绑定事件　　参数：type：可选。取消绑定的类型，可以是多个。　　　　 ?function：可选。取消绑定的函数　　当没有参数时，删除此标签所有由bind()绑定的事件程序。

$("ul").bind("click",function(){ ????var v = $(this).text(); ????alert(v);});

$("#s1").delegate("selector", "type", {data}, function)　　参数：selector：必需。是一个选择器，可选择被点击元素的一个或多个子元素。在这里，并不是为s1绑定事件，而是为筛选后的selector绑定。　　　　 ???type：必需。绑定事件的类型。可以绑定多个，用空格隔开。　　　　 ???data：可选。传入参数，字典的形式。　　　　　 function：必需。执行函数。.undelegate("selector", "event", function) ?删除由delegate()方法绑定的事件　　参数：selector：可选。同上。　　　　 ???event：可选。事件，一个或多个　　　　 ???function：可选。解除指定的函数　　如果没有参数，删除此标签所有由delegate()绑定的事件程序。　　在解除事件函数绑定时，如果使用选择器，必需和绑定时的选择器相同，否则会解除失败。

 ???????$(‘ul‘).delegate(‘li‘,‘click‘,A); ???????function A() { ???????????var v = $(this).text(); ???????????alert(v); ???????} ???????$(‘ul‘).undelegate("li","click",A); // 解除绑定 ???????$(‘ul‘).children().eq(0).undelegate(); // 解除绑定失败 ???????$(‘ul‘).undelegate("#s1","click",A); ??// 解除绑定失败 ???????// $(‘ul‘).delegate(‘#s1‘,‘click‘,function () { ???????// ????var v = $(this).text(); ???????// ????alert(v); ???????// });

.on("type", "selector", {data}, function)　　参数：type：必需。同上　　　　　selector：可选。同上。　　　　　data：传入参数。同上。　　　　　function：执行函数。同上。.off("type", "selector", function)　　参数：type：必需。同上。　　　　　selector：可选。同上。　　　　　function：可选。指定取消绑定的函数。　　如果没有参数，删除此标签所有由on()绑定的事件程序。　　在解除事件函数绑定时，如果使用选择器，必需和绑定时的选择器相同，否则会解除失败。

.on( {object:function(e){ ... }}，“selector”，{data} )　　参数：object：必需。事件对象。　　　　　function：必需。执行函数。　　　　　selector：可选。选择器。　　　　　e：可选。形参　　　　　data：可选。

// 第一种语法结构$(‘ul‘).on(‘click‘,‘li‘,function () { ???var v = $(this).text(); ???alert(v);});// 第二种语法结构$("ul").on({ ???mouseenter: function() { ???????$(this).css("color","red"); ???}, ???mouseleave: function() { ???????$(this).css("color","black"); ???}, ???click: function(e) { ???????alert(e.data.a); ???}}, "li",{a:"你好"});

 ???<script> ???????function btnClick1(){ ?????????alert( this.value + "-1" ); ???????} ???????function btnClick2(){ ?????????alert( this.value + "-2" ); ???????} ???????var $body = $("body"); ???????// 给按钮1绑定点击 ???????$body.on("click", "#btn1", btnClick1 ); ???????// 给按钮2绑定点击 ???????$body.on("click", "#btn2", btnClick2 ); ???????// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2 ???????// 点击按钮，btnClick1照样执行 ???????$body.off("click", ":button", btnClick2); // 发现并不起作用 ???????// 点击按钮1，不会执行任何事件处理函数 ???????// $body.off("click", "#btn1"); ???????????????// 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。 ???</script>

.one(event,data,function)参数：event：必需。事件 ???????data：可选。参数 ???????function：必需。执行函数。

.on("click",{a:"3",b:"4"},func2); ?// 传入参数以字典形式 ???function func2(c){ ???????console.log(c.data["a"]); ???????console.log(c.data["b"]); ???????console.log(c.data.a); ????????console.log(c.data.b); ???} 

// 类方法$.extend({ ???"nihao":function(){ ???????return "sb"; ???}});调用：$.nihao();//alert($.nihao());// 对象方法$.fn.extend({ ???"hello":function(){ ???????return "db"; ???}});调用：$("选择器").hello();//alert(v2);