基本选择器
$("#d1"); //id选择器
$(".c1"); //class选择器
$("div"); //标签选择器，里面直接写标签名字
$("*"); //所有标签
配合使用
$("div.c");//找到类名为c1的div标签
组合使用
$("#d1,#d2");//是或的关系，找到d1和d2标签
层级选择器：
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
has的说明
$("#dd:has(p)") ;//找到含有p标签的id为dd的标签，注意，找到的不是p标签而是id号为dd
pycharm的html格式对齐
code--->reformat code
属性选择器
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled
:disabled
:checked
:selected
<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") //找到后面所有元素知道id为#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") // 等价于 $("div.c1")
补充
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS样式直接修改 ：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
小技巧：
对offset赋值的规则可以先输入offset观看输出结果，然后按照输出结果来赋值
尺寸：
height()
width()
innerHeight() //内容加内填充距离
innerWidth()
outerHeight() //内容加内填充距离加边框
outerWidth()
文本操作
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
html与text区别：
html连标签都返回，text只返回内容
设置值
<p>爱好： <label>basketball <input value="basket" type="checkbox" name="hobby"> </label> <label>football <input type="checkbox" value="foot" name="hobby"> </label> <label>doubleball <input type="checkbox" value="double" name="hobby"> </label> </p> //设置值 $("[name='hobby']").val(['basketball', 'football']); $(":checkbox[name='hobby']).val(['basketball', 'football']); 获取值 for(var i=0;i<$(":checkbox[name=hobby]:checked").length;i++) { console.log($($(":checkbox[name=hobby]:checked")[i]).val()); } //注意 $(":checkbox[name=hobby]:checked")[i]是dom原生对象，需要转成jQ对象
通过for循环来操作属性
注意$(":checkbox[name=hobby]:checked")[i]是原始dom标签，需要加$()来转化为jQuery标签
对于select我们不需要for循环写，因为select其实与一个label绑定
<p>
<label for="s1">从哪儿来:</label>
<select name="from" id="s1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
</select>
</p>
当我们重复使用一个标签时，我们可以将它赋值给一个变量
var $needEles = $(".need");
属性修改
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
<input type="checkbox" id="i1" value="1"> $("#i1").attr("checked") // undefined $("#i1").prop("checked") // false 可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为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()// 删除匹配的元素集合中所有的子节点。
注意事项
html多行操作：
事件：
.on([事件],[选择器],funcction(){});
当参数中不填选择器时
一般用于普通标签的事件触发，及时绑定function
$("#b1").on("click", function () { //当点击id为b1的标签的时候，会进行function动作 // 生成要添加的tr标签及数据 var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" + "<td>小东北</td>" + "<td>社会摇</td>" + "<td><button class='delete'>删除</button></td>"); // 把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle); });
当参数中填了选择器时
一般用于新生成的标签与事件绑定
return false
阻止表单数据提交，意思是，当我们触发某个事件，与之关联的表单（form,input...）数据无法提交给浏览器去验证
跳出for循环
使用break；
等DOM树生成之后 再执行某函数
//写法一
$(document).ready(function () {
console.log($("#d1").text());
// 执行绑定事件的操作
});
//写法二
$(function () {
console.log($("#d1").text());
// 执行绑定事件的操作
});
each循环
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
each对标签的循环
$.each($('input'),function(index,data){ //找到标签
$(data).attr('name','name_'+index); //使用attr添加属性到name
});
第二种写法
[标签变量].each(function(){});
结束each循环
后续的each都不用执行：
return false;
跳过这一次循环
return
innerText text val 区别
innerText原生的函数
text使jQ的函数
val是某个标签的值，例如input框里面，当我们输入一个值的时候，此时这个input框的val就是我们刚刚输入的值
var相加操作
var a = new String(3); //当变量是string类型时 a+1; //此时结果为31 //如果我们想得到4，以下方法可实现 //方法1: a = a*1 +1; //方法2：NUmber方法 a = Number(a)+1;
参考博客：
https://www.cnblogs.com/liwenzhou/p/8178806.html
浙公网安备 33010602011771号