jQuery
jQuery重点讲解知识点 *
一 选择器
1 基础选择器
类选择器
元素选择器
ID选择器
子元素选择器
后代元素选择器
2 属性选择器
完美匹配
包含
前缀
开头
结尾
空格
3 jQuery扩展选择器
eq
even
odd
first
last
gt
lt
二 DOM操作
1 Class操作
javascript操作
`
<div class="error">hello</div>
<script>
// js方式添加class
var div = document.getElementsByTagName("div")[0];
div.className = "txt error"; // 添加
div.className = ""; // 移除
</script>
addClass() ；removeClass()； toggleClass() ； hasClass() ；
`
<div class="error">Hello</div>
<span class="txt">Hello</span>
<a href="#" class="active">itbaizhan</a>
<img src="" alt="" class="img">
<script>
/**
* 1. addClass() :添加class，不会覆盖原有的class 可以添加多个class，用个空格隔开
* 2. removeClass() :移除class，可以移除一个或者多个，也可以全部移除
* 3. toggleClass() :开关，如果存在则删除，如果不存在则添加
* 4. hasClass() :判断一个元素是否存在某个class，存在返回true，不存在返回false
*
* 补充知识点：在jQuery中，有个链式调用
* */
// $("div").addClass("txt success");
// $("div").removeClass("txt error");
// $("div").removeClass(); // 全部移除
// $("span").toggleClass("txt")
// var flag = $("a").hasClass("active");
// console.log(flag);
// if(flag){
// console.log("a标签存在active");
// }else{
// console.log("a标签不存在active");
// }
// 给某个元素添加一个class然后在移除一个class
// 把img的class="img"移除掉，在添加个class="image"
// $("img").addClass("image");
// $("img").removeClass("img")
$("img").removeClass("img").addClass("image") // 链式调用
</script>
* 2. removeClass() :移除class，可以移除一个或者多个，也可以全部移除
* 3. toggleClass() :开关，如果存在则删除，如果不存在则添加
* 4. hasClass() :判断一个元素是否存在某个class，存在返回true，不存在返回false
链式调用
2 文本操作
html()
`
<div class="box">Hello, jQuery</div>
<script>
// 1. html() :设置一个元素内容和获取一个元素内容
// var content = $(".box").html(); // 获得内容
// console.log(content);
// $(".box").html("你好啊") // 设置内容
// 在js中，innerHTML和innerText 在jQuery html() text()
// var content = $(".box").text();
// console.log(content);
// $(".box").text("<a href='#'>itbaizhan</a>");
$(".box").html("<a href='#'>itbaizhan</a>");
</script>
text()
val()
3 属性操作
attr()
`
<img class="img1" src="./1.jpg" alt="小姐姐">
<img class="img2" src="" alt="">
<script>
var content = $(".img1").attr("alt");
$(".img2").attr("src","./1.jpg")
// 同时设置多个属性
$(".img2").attr({
src:"./1.jpg",
alt:"美女",
title:"小姐姐"
})
</script>
removeAttr()
`
<a href="#" alt="测试">itbaizha</a>
<script>
// $("a").removeAttr("alt"); // 删除属性alt
</script>
4 DOM 插入并包裹现有内容
javascript操作
`
<p id="text">Hello</p>
<script>
// 创建一个div容器，包裹p标签
// 1. 创建div元素
var root = document.createElement("div");
// 2. 找到p标签
var text = document.getElementById("text");
// 3. 将p标签放入到div中
root.appendChild(text)
// 4. 将div放入到body中显示
document.getElementsByTagName("body")[0].appendChild(root);
</script>
.wrap()
.unwrap()
`
<div>
<p id="text">Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<script>
// 删除p标签的父级元素
$("#text").unwrap();
</script>
.wrapAll()
`
<p>sxt</p>
<p>itbaizhan</p>
<span>Hello</span>
<p>web</p>
<script>
// 将三个p标签包裹在一个容器中div
$("p").wrapAll("<div></div>");
</script>
.wrapInner()
`
<p>Hello</p>
<script>
// 包裹p标签里的内容
$("p").wrapInner("<i></i>");
</script>
5 DOM 插入现有元素内
javascript操作
`
<div id="root"></div>
<script>
// 创建一个p标签带有内容，然后插入到div中
var root = document.getElementById("root");
// 创建p标签
var p = document.createElement("p");
p.innerHTML = "Hello";
// 插入 appendChild:将一个元素插入到另一个元素中
root.appendChild(p);//p为子元素
</script>
.append()
`
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的尾部添加内容
$("#root").append("<p>Hello World</p>");
</script>
.prepend()
`
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的头部添加内容
$("#root").prepend("<p>Hello World</p>");
</script>
6 DOM 插入现有元素外
.after()
`
<p>Hello</p>
<script>
// 在p标签的同级下面增加一个p标签，内容为world
$("p").after("<p>world</p>");
</script>
.before()
`
<p>Hello</p>
<script>
// 在p标签的同级上面增加一个p标签，内容为world
$("p").before("<p>world</p>");
</script>
7 DOM 移除
.empty()
`
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 清空div中的内容：empty
$("#box").empty();
</script>
.remove()
`
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 移除div元素，同时移除掉里面所有的内容 remove
// 在JS中：函数就是方法，方法就是函数，无论是函数还是方法后面添加括号
// Array: 方法：push() pop() 属性：length
$("#box").remove();
</script>
8 DOM 替换
.replaceAll()
`
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceAll
$("<span>World</span>").replaceAll("#text")
</script>
.replaceWith()
`
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceWith
$("#text").replaceWith("<b>World</b>")
</script>
