标签：默认 属性 4行 tab app ring 表示 选择 代码
jQuery有addClass,removeClass,toggleClass,hasClass4个类操作方法；
jQuery UI除了对前三者增加了动画外，还添加了switchClass方法(含动画)
| 方法 | 备注 |
|---|---|
| add/remove/toggle Class(class) | jQuery只有一个参数 |
| hasClass(class) | 返回布尔值 |
设置css
//单个
$("p").css("backgroundColor","#aaa");
//多个
$("p").css({
"width":"100px",
...
});参数书写格式看这里：https://blog.csdn.net/yjl15517377095/article/details/99827188 → 自定义动画 → 参数书写格式
书写规范都一样，可以使用相对值，不可以使用预设值
注意获取单个时属性必须为String，或者按多个作为对象则可以不加引号
设置的css为内联样式，优先级为1000(最高的,除了!important)
示例代码：
<div id="a">
aaa
<div>
div2
</div>
<input type="text" id="b" />
</div>a.innerHTML <=> $("#a").html()
a.innerText <=> $("#a").text()
b.value <=> $("#b").val()
- 注意text有区别，jQuery输出所有文本，js不输出tab，每段文字后还加个空格
//原生js输出: aaa空格 div2空格 //Query输出: 制表符aaa 制表符 制表符制表符div2 制表符 制表符
- js的是属性，而jQuery的是方法，要加()
a.innerText="<p>text</p>" <=> $("#a").text("<p>text</p>")
a.innerHTML="<p>text</p>" <=> $("#a").html("<p>text</p>")
b.value="text" <=> $("b").val("text")
和原生js一样，原生js DOM操作笔记(点击跳转)
点击查看：原生js操作
jQuery中的节点属性操作对应原生js的作为节点操作，直接写原属性名即可
示例代码：<img src="1.jpg" id="i1" class="imgs" alt="img1" />
$("#i1").attr("class") --> imgs
$("#i1").attr("alt") --> img1单个
$("#i1").attr("class","imgs2") --> imgs
$("#i1").attr("alt","img2") --> img2多个
参数书写规范请参考：点击跳转
$("#i1").attr({
"alt":"img2",
class:"imgs2"
});回调函数(批量)
假设有3个img：
<img src="1.jpg" id="i1" class="imgs" alt="img" />
<img src="1.jpg" id="i2" class="imgs" alt="img" />
<img src="1.jpg" id="i3" class="imgs" alt="img" />var imgs=$("img"); //选择3个img
imgs.attr("class",function(index,value){ //批量更改3个img的class
return value+index; //return的就是设置的值
});
//index是imgs中的下标，value是原值，两个变量名随意，但位置不要颠倒$("#i1").removeAttr("class")
$("#i1").removeAttr("alt")原生js有2个插入方法：
appendChild(在被选元素结尾插入),insertBefore(在被选元素内参考节点前插入)
jQuery有4个插入方法：
append(追加,在被选元素结尾插入),prepend(预置,在被选元素开头插入)在被选元素内部插入after,before在被选元素外部插入
原生js只能插入由
createElement创建的对象，jQuery则有文本,jQuery对象,js对象3种方式
html示例代码：
<div id="d1">
<p>000</p>
</div>append / prepend
var node1="<p>111</p>"; //String类型
var node2=$("<p>222</p>"); //jQuery对象
var node3=document.createElement("p"); //js对象
node3.innerHTML="333";
d1.append(node1,node2,node3); //插入多少个随意，插入时按排列顺序依次插入结果:
<div id="d1">
<p>000</p>
<p>111</p>
<p>222</p>
<p>333</p>
</div>after / before
/*1-4行同上*/
...
var nodes=[node1,node2,node3];
d1.before(nodes); //作为数组插入，效果同上结果:
<p>111</p>
<p>222</p>
<p>333</p>
<div id="d1">
<p>000</p>
</div>原生js仅有一个removeChild(删除本身及子元素)方法
jQuery有remove(对应removeChild)和empty(仅清空子元素)
remove
$("#d1").remove(); //删除d1及其子元素，结果为：空
$("div").remove("#d1"); //带过滤条件的remove方法
$("div#d1").remove(); //等同于上一行，上一行即 div和#d1的交集empty
$("#d1").empty(); //仅清空子元素，结果为：<div id="d1"></div>
//empty没有过滤条件方法，但可以用上面代码的第三行的形式$("#d1").html(""); //等同于empty()复制使用clone()方法，类似原生js的cloneNode()，不同的是复制的是jQuery对象
var d1=$("#d1");
var p=$("p");
d1.after(p); //没复制的情况下直接移动元素，结果：<div id="d1"></div><p>000</p>
var p2=p.clone(); //复制jQuery对象
d1.after(p2); //添加复制节点，假设第3行未生效，则结果为：<div id="d1"><p>000</p></div><p>000</p>| jQuery | 原生js | 含义 |
|---|---|---|
| width() | style.width | width(js有单位,jQuery没单位默认为px,这里jQuery应该用的多) |
| innerWidth() | clientWidth | width+padding*2 |
| outerWidth() | offsetWidth | width+padding*2+margin *2 |
总结：jQuery的盒子模型没原生js的全，但width()/height()比较好用
原生js：点击查看
示例html：
<div id="card">
<h5 id="title">title</h5>
<div id="cardBody">
<p id="text">this is text.</p>
</div>
</div>获取上一个
parent()，等同于原生js的parentNode
var card=$("#cardBody");
console.log(card.parent().attr("id")); //输出 card获取所有
parents()
var text=$("#text");
text.parents().each(function(index,domEle){ //遍历父元素(domEle是 dom类型)
console.log(domEle);
});输出:
<div id="cardBody">...</div> <div id="card">...</div> <body>...</body> <html>...</html>
还可以指定过滤条件：
var text=$("#text");
text.parents("div").each(function(index,domEle){
console.log(domEle);
});输出
<div id="cardBody">...</div> <div id="card">...</div>
指定截断元素
parentsUntil，子元素.parentsUntil(父元素)，顺序不能颠倒
var text=$("#text");
var card=$("#card");
console.log(text.parentsUntil(card)); //输出 cardBody，不含 cardjQuery子节点操作方法得到的子节点只包含元素节点，与原生js有差异
所有下一级子节点
children()，等同于原生JS的children，支持条件过滤（写方法参数里）
var card=$("#card");
card.children().each(function(index,element){
console.log(element.id); //输出 title cardBody
});所有子级子节点
card.find("*"); //*表示所有，还可改为过滤条件，！必须加参数这些函数都支持过滤条件参数
| 函数 | 解释 |
|---|---|
siblings() |
所有兄弟节点 |
prev()/next() |
上/下 一个兄弟节点 |
prevAll()/nextAll() |
所有 上/下 面兄弟节点 |
prevUntil()/nextUntil() |
指定截断元素(使用方法类似上面父节点的) |
点击跳转：jQuery选择器笔记
eq()
例子：$(".box").eq(0) 等同于 $(".box:eq(0)")
first()
当前选择器选中的元素列表的第一个，不同于原生JS的first(选择第一个子元素)
例子：$(".box").first() 等同于 $(".box").eq(0)
last()
当前选择器选中的元素列表的最后一个，不同于原生JS的last
filter()
仅过滤，后面方法参数 和 前面选择器参数的 交集
$("p").filter(".url") 等同于 $("p.url")
not()
与filter相反，filter是 符合前面且符合后面，not是 符合前面且不符合后面
标签：默认 属性 4行 tab app ring 表示 选择 代码
原文地址：https://www.cnblogs.com/yangjiale/p/11456471.html
