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({
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")) //把所有的按钮换成p
9.复制节点
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>