1.jQuery的基本操作;
1) innerhtml和innertext
修改:innerhtml可以放html片段，并且可以解析;
innertext可以放html片段,但是不会解析;
访问:innerhtml是访问一串html代码;
innertext是访问标签中的内容;
<script>var city = document.getElementById("city"); ???console.log(city.innerHTML); ???console.log(city.innerText); ???city.innerText = "<li>你好</li>";</script>
2) val()
封裝原生的value屬性 主要是用於表單元素
3) attr()
可以设置一个属性，也可以设置多个属性
$("#city").attr("class","d1") ?? //设置一个$("#city").attr({ ???? //设置多个 ???????"name" : "zhangsan", ???????"age" : "30" })
console.log($("#city").attr("class")) //不传递参数就是访问
$("#city").removeAttr("class") //删除指定的属性
2.样式操作
1) attr()方法
// <button id="btn1">attr()方法</button>
$("#btn1").click(function(){ ?????$("#div1").attr({ ?????????class : "one" ??????}) })
2) 追加样式: addClass(" ")
//<button id="btn2">追加样式</button> ???$("#btn2").click(function(){ ????????$("#div1").addClass("two") ???})
3) 删除样式:removeClass()
//<button id="btn3">删除样式</button> ???$("#btn3").click(function(){ ???????????$("#div1").removeClass() ???//如果不传递参数就是删除所有， ???????????????$("#div1").removeClass("two") ????//传递参数就是删除某个 ????}) ???????????????
4) 切换样式: toggleClass(" ")
//<button id="btn4">切换样式</button> ???$("#btn4").click(function(){ ???????????????//如果有这个样式就删除,如果没有就增加 ???????$("#div1").toggleClass("two") ?????}) ???????5) 判断样式: hasClass(" ")
// <button id="btn5">判断样式</button> ???$("#btn5").click(function(){ ???????????console.log($("#div1").hasClass("two")) ??//判断这个样式是否存在在这个dom上面 ???})
6) css( ) 方法
取得第一个段落的color样式属性的值。
$("p").css("color"); 将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" }); 将所有段落字体设为红色
$("p").css("color","red");逐渐增加div的大小
$("div").click(function() { ???$(this).css({ ?????width: function(index, value) { ???????return parseFloat(value) * 1.2; ?????}, ??????height: function(index, value) { ???????return parseFloat(value) * 1.2; ?????} ???}); ?});3.创建节点
<ul> ???????????<li>北京</li> ???????????<li>天津</li> ???????????<li>南京</li></ul> ???????<script>// ???????????原生的dom// ???????????创建一个武汉节点,加入到ul中 ???????????var $li = $("<li></li>"); ???????????$li.text("武汉"); ???????????$li.attr("id","wuhan");// ???????????2.添加到ul中 ???????????$("ul").append($li) ??//内部插入 ???????????</script>4.遍历节点
<ul id="city" name="城市列表"> ???????????<li>北京 ???????????????<ul> ???????????????????<li>海淀区</li> ???????????????????<li>朝阳区</li> ???????????????</ul> ???????????</li> ???????????<li>天津</li> ???????????<li>上海</li> ???????????<li>重庆</li> ???????????<li>南京</li></ul>
1) 所有子元素:children()
获取第一个ul元素中所有子元素的个数
console.log($("ul:first").children().length)
2) 获取第N个元素:get([index])
获取ul元素中的第三个子元素的文本
console.log($("ul:first").children(":eq(2)").text())console.log($("ul:first").children().get(2).innerText)console.log($("ul:first").children()[2].innerText)console.log($($("ul:first").children().get(2)).text())
3) 父元素:parent()
获取上海这个元素的父元素的name属性
console.log($($("ul:first").children().get(2)).parent().attr("name"))
4) 兄弟元素:prev(),next()
获取上海这个元素的上一个兄弟元素和下一个兄弟元素
console.log($("ul:first").children(":eq(2)").prev().text())console.log($("ul:first").children(":eq(2)").next().text())
5)同辈元素:siblings()
获取上海这个元素的兄弟元素的所有个数
console.log($("ul:first").children(":eq(2)").siblings().length) 找到每个div的所有同辈元素中带有类名为selected的元素。
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
$("div").siblings(".selected")// <p class="selected">Hello Again</p>
6)所有与指定表达式匹配的元素:find()
获取ul中所有的li的个数
console.log($("ul li").length)console.log($("ul").find("li").length)5.内部插入
1) append(content|fn)
把后面的东西插入到了前面的子节点中（追加）
$("#tj").append($("#xj"))
2)appendTo(content)
把前面的东西插入到了后面的子节点中（追加）
$("#tj").appendTo($("#xj"))
3) prepend(content|fn)
把后面的东西插入到了前面的子节点中（前面插入）
$("#tj").prepend($("#xj"))
4)prependTo(content)
把前面的东西插入到了后面的子节点中（前面插入）
$("#tj").prependTo($("#xj")) 6.外部插入
1) after(content|fn)
把后面的插入到了前面的下一个兄弟的位置
$("#tj").after($("#xj")) ?
2) before(content|fn)
把后面的插入到了前面的上一个兄弟的位置
$("#tj").before($("#xj")) ??3) insertAfter(content)
把前面的插入到了后面的下一个兄弟
$("#tj").insertAfter($("#xj")) ?
4) insertBefore(content)
把前面的插入到了后面的上一个兄弟的位置
$("#tj").insertBefore($("#xj"))7.删除节点
empty() 谋杀式的
remove([expr]) 自杀式
<body> ???????<ul id="city"> ???????????<li id="bj">北京</li> ???????????<li id="tj">天津</li> ???????????<li id="sh">上海</li> ???????</ul> ???????<script>// ???????????var sh = document.getElementById("sh");// ???????????console.log(sh.remove()) ???//这个是没有返回值的 ????自杀式// ???????????var city = document.getElementById("city");// ???????????console.log(city.removeChild(sh)) ???//这个是相当于剪贴操作 ????谋杀式 ??????????????????????? empty() ?????//谋杀式的 ??????? $("#sh").empty() ??????????????????????? remove([expr]) ???//自杀式 ???????????$("#sh").remove(); ???????</script> ???</body>8.替换节点
replaceWith(content|fn): 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素
$("p").replaceWith($("<button>按钮</button>")) ?//把p换成按钮$("<p>这是一个段落.</p>").replaceAll($("button")) ???//把所有的按钮换成p9.复制节点
clone([Even[,deepEven]])
克隆匹配的DOM元素并且选中这些克隆的副本
<body> ???????<button>按钮</button> ???????<p>这是一个段落.</p> ???????<script> ???????????$("button").click(function(){ ???????????????console.log("hello world") ???????????}) ???????????????????????$("button").clone(true).appendTo($("p")) ???//注意true的作用，表示事件是否会被克隆 ???????????????????</script></body>jquery基本操作
原文地址：https://www.cnblogs.com/1234wu/p/10268903.html