jquery
例子
<p>p1</p>
<p>p2</p>
<p>p3</p>
拿到对象
const result = $(“p”)
result.length——3
innerText—text()
innerHtml—html()
append()—把小弟加到尾部
prepend()—把小弟加到顶部
appendTo()—--加入到大哥尾部
prependTo()—加入到大哥的顶部
remove()——灭了他
实例操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="box1">
<h1> i like u</h1>
</div>
<hr>
<div class="box1">
<h1> i like baby</h1>
</div>
<script type="text/javascript">
//原始dom方法 需要循环去赋值
function dom_text_html_test(){
// const h1s = document.querySelectorAll(".box1>h1");
// console.log(h1s);
// h1s[0].innerText = "i hate u ";
// h1s[1].innerText = "i hate u too";
document.querySelectorAll(".box1>h1").forEach(function(h1){
h1.innerHTML = `<span>i don't like u uuu</span> dear`
})
}
//jquery对象,一次性赋值 更简洁
function jq_text_html_test2(){
$(".box1>h1").html("<span>i don't like u uuu</span> dear");
}
//jquery test() html()方法实例
function jq_text_html_test(){
//text() html() 查看dom
console.log($(".box1").text());
console.log($(".box1 >h1").html());
// 返回 i like u
console.log($(".box1").html());
// 返回<h1> i like u</h1>
//text() html() 改变dom
$(".box1 >h1").text("i don't like u ");
// 界面变成 i dont like u
// .text如果里面有标签不会被解析成标签当成字符
$(".box1 >h1").text("<span>i don't like u uuu</span>");
//界面变成 <span>i don't like u uuu</span>
$(".box1 >h1").html("<span>i don't like u uuu</span>");
//界面变成 i don't like u
}
//append prepend
function append_prepend(){
let child1 = $("<p>child1</p>");
$(".box1").append(child1);
let domcreat1 = document.createElement("input");
$(".box1").append(domcreat1,"<p>11111</p>","<p>2222</p>");
$(".box1").prepend(domcreat1,"<p>11111</p>","<p>2222</p>");
}
append_prepend();
//appendTo() prependTo()
function appendTo_prependTo(){
$("<h3>childh3appendTo</h3>").appendTo($(".box1"));
$("<h3>childh3prependTo</h3>").prependTo($(".box1"));
}
appendTo_prependTo();
$("h1").remove();
</script>
</body>
</html>
replaceAll—替换
replaceWith 用什么替换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>我不想写</h1>
<h1>我不想起床</h1>
<script type="text/javascript">
//replaceAll替换什么
// $("<input>").replaceAll("h1");
// $("<input>").replaceAll("h1:nth-child(1)");
//replaceWith() 用什么来替换自己
// $("h1").replaceWith("<textarea>");
// $("h1:nth-child(2)").replaceWith("<textarea>");
// 采用下坐标后是纯dom对象 需要再转成jquery才可以用 replaceWith
$($("h1")[0]).replaceWith("<textarea>");
</script>
</body>
</html>
children() 得到一层的子对象 dom对对象,像树型,
例子
<div class="main">
<div class="sub">
<div class="sub2">
</div>
</div>
<div class="sub1">
</div>
</div>
console.log($(".main").children().length);
console.log($(".main").children()[0]);
console.log($(".main").children()[1]);
查询:
通过下坐标result[0]拿到的值是原始的dom对象
eq(index) 根据index得到结果中的对象,是在result[0]的外部封装了jquery。可以享受到jquery 的API
is(selector) 判断是否有这个选择器的 dom 返回boolean
slice(start, end) 返回一个封装好的新的jquery对象,
p.slice(1,3) —>[p2,p3]
each()—同数组同名用法
find(selector) 在当前jquery中 通过选择器查找,
next()—下一个
prev()—前一个
parent()—上层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>a
<span class=".icon">span1</span>
<span class=".icon">span1
<span class=".icon">span1111</span>
</span>
<span class=".icon">span1</span>
<span class=".icon">span1</span>
</p>
<p>b</p>
<p>c
<span class=".icon">span2</span>
<span class=".icon">span2</span>
<span class=".icon">span2</span>
</p>
<p class="sub">d</p>
<script type="text/javascript">
// eq(index)
console.log($("p")[0]);//dom对象
console.log($("p").eq(0));//jquery对象 wrap {dom}
// is(selector)
console.log($("p").is(".sub"));//true
//slice(start,end)
console.log($("p").slice(1,3).length);//2
//each()
// 查看有几个实参
$("p").each(function(){console.log(arguments)});
// 返回 4个p的dom对象
$("p").each(function(index,dom){console.log(dom)});
// find(selector) 找内部匹配的元素
console.log($("p").find("span").toArray());
// children() 返回第一层子元素
console.log($("p").children().toArray());
// next() 同级下一个
// prev()同级上一个
// $("p:nth-child(3)").next().css("background-color","blue");
// $("p:nth-child(2n+1)").next().css("background-color","blue");
$("p:nth-child(2n+1)").next().prev().css("background-color","blue");
// parent()上级
$("p").parent().css("background-color","#f6f6f6");
</script>
</body>
</html>
Dom属性操作
val() 表单元素的值
attr() 属性
css() 读写样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
input{
background-color: blue;
}
</style>
</head>
<body>
<input type="text" name="" value="">
<select class="" name="">
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
</select>
<button type="button" name="button" data-custom = "i">读取</button>
<button type="button" name="button" data-custom = "u">重置</button>
<script type="text/javascript">
// val()即可读又可写
function readFormData(){
console.log("input value 为 ",$("input").val());
console.log("select value 为 ",$("select").val());
}
// dom事件
$("button")[0].onclick = readFormData;
$("button")[1].onclick = function updateData(){
$("input").val("请输入");
$("select").val("CC");
};
// attr() 读写属性
// 读属性只返回了第一个
console.log($("button").attr("data-custom"));
// 写可以全部更改
$("button").attr("data-custom","all");
//其他方式全部读取出来
let attris=[];
$("button").each(function(index,dom){
attris.push($(dom).attr("data-custom"));
});
console.log(attris);
// css() 读写样式
console.log($("input").css("background-color"));
// 写
$("input").css("background-color","yellow");
//多种写法
$("input").css("background-color","yellow")
.css("outline","none")
.css("border","2px solid red");
//多个值还可以用对象的写法 名字驼峰写法要
$("input").css({
backgroundColor:"gray",
color:"red"
})
</script>
</body>
</html>
addClass() —加class
removeClass()—删除class
hasClass()—判断是否有class
toggleClass()— 开关,有这个class会删除,没有会添加这个 class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
.comm-bg{
background-color: #333;
}
.comm-color{
color:white;
}
.comm-font-size{
color:#eee;
}
</style>
</head>
<body>
<input type="text" name="" value="">
<select class="" name="">
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
</select>
<button type="button" name="button" data-custom = "i">读取</button>
<button type="button" name="button" data-custom = "u">重置</button>
<script type="text/javascript">
$("input").addClass("comm-bg comm-color comm-font-size");
console.log($("input").hasClass("comm-color"));
$("input").removeClass();
console.log($("input").hasClass("comm-color"));
$("input")[0].onclick = function (){
$("input").toggleClass("comm-bg");//开关
}
</script>
</body>
</html>
基本用法是这些,对象操作看我其他文章。