1 - 文本操作
/*
$("选择符").html() // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容
$("选择符").text() // 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容) // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
*/
2 - value操作
$().val()
3 - 属性操作
/*
//读取属性值
$("选择符").attr("属性名"); // 获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").prop("属性名"); // 表单元素的属性,只会提取第一个元素的属性值
//操作属性
$("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改
$("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改
$("选择符").attr({‘属性名1‘:‘属性值1‘,‘属性名2‘:‘属性值2‘,.....})
$("选择符").prop({‘属性名1‘:‘属性值1‘,‘属性名2‘:‘属性值2‘,.....})
*/
<button>all</button> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script> $("button").click(function (){ var val = $("[type]").attr(‘checked‘) $("[type]").attr(‘checked‘,!val) }) </script>
4 - class属性操作
$().addClass("class1 class2 ... ...") // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加
5 - CSS样式操作
/*
获取样式
$().css("样式属性"); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
$().css("样式属性":function(){
// 其他代码操作
return "样式值";
});
*/
6 - 节点操作
/* //创建一个jquery标签对象 $("<p>") //内部插入 $("").append(content|fn) // $("p").append("<b>Hello</b>"); $("").appendTo(content) // $("p").appendTo("div"); $("").prepend(content|fn) // $("p").prepend("<b>Hello</b>"); $("").prependTo(content) // $("p").prependTo("#foo"); //外部插入 $("").after(content|fn) // ("p").after("<b>Hello</b>"); $("").before(content|fn) // $("p").before("<b>Hello</b>"); $("").insertAfter(content) // $("p").insertAfter("#foo"); $("").insertBefore(content) // $("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]]) */
7 - 案例：tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .tab{ width: 800px; height: 300px; /*border: 1px solid rebeccapurple;*/ margin: 200px auto; } .tab ul{ list-style: none; } .tab ul li{ display: inline-block; } .tab_title { background-color: #f7f7f7; border: 1px solid #eee; border-bottom: 1px solid #e4393c; } .tab .tab_title li{ padding: 10px 25px; font-size: 14px; } .tab .tab_title li.current{ background-color: #e4393c; color: #fff; cursor: default; } .tab_con li.hide{ display: none; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head> <body> <div class="tab"> <ul class="tab_title"> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评论</li> </ul> <ul class="tab_con"> <li>商品介绍...</li> <li class="hide">规格与包装...</li> <li class="hide">售后保障...</li> <li class="hide">商品评论...</li> </ul> </div> <script> // jQuery $(".tab_title li").click(function (){ // current样式 $(this).addClass("current").siblings().removeClass(‘current‘); // hide样式 $(".tab_con li").eq($(this).index()).removeClass("hide").siblings().addClass("hide") }) </script> </body> </html>
8 - 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="add">添加节点</button> <button class="rem">删除节点</button> <button class="rep">替换节点</button> <div class="region"> <h3 class="hi">hi,yuan</h3> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(".add").click(function (){ // 方式1 添加节点字符串 // $(".region").append("<img src=‘https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1234940918,4035050611&fm=26&gp=0.jpg‘>") // 方式2 添加对象 var $img = $("<img>"); $img.attr("src","https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1234940918,4035050611&fm=26&gp=0.jpg") $(".region").append($img); }); $(".rem").click(function () { $("img").first().remove() }); $(".rep").click(function () { $(".region .hi").replaceWith("<h1>HI,YUAN!</h1>") }) </script> </body> </html>
9 - 案例：
<div class="outer"> <div class="item"> <input type="button" value="+" class="add"> <input type="text"> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(".add").click(function () { var $clone=$(this).parent().clone() $clone.children(".add").attr({"value":"-","class":"rem"}) $(".outer").append($clone); }); $(‘.rem‘).click(function () { $(this).parent().remove() }); // 事件委派 $(".outer").on("click",".item .rem",function () { $(this).parent().remove() }) </script>
10 - CSS尺寸
/*
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
*/
11 - CSS位置
/*
$("").offset([coordinates]) // 获取匹配元素在当前视口的相对偏移。
$("").position() // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val]) // 获取匹配元素相对滚动条顶部的偏移。
*/
12 - 案例：返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .returnTop{ height: 60px; width: 100px; background-color: #369; position: fixed; right: 20px; bottom: 20px; color: white; line-height: 60px; text-align: center; } .c1{ background-color: darkgrey; height: 2400px; } .hide{ display: none; } </style> </head> <body> <div class="c1"></div> <div class="returnTop hide">返回顶部</div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(window).scroll(function(){ var current=$(window).scrollTop(); console.log(current); if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } }); $(".returnTop").click(function(){ $(window).scrollTop(0) }); </script> </body> </html>
13 - 案例：位置偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color: orange; } .parent_box{ width: 800px; height: 500px; margin: 200px auto; border: 1px solid rebeccapurple; } </style> </head> <body> <button class="btn1">offset</button> <div class="parent_box"> <div class="box"></div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> var $offset=$(".box").offset(); var $left=$offset.left; var $top=$offset.top; console.log("$offset","top:"+$top+" left:"+$left) var $position=$(".box").position(); var $left=$position.left; var $top=$position.top; console.log("$position","top:"+$top+" left:"+$left); $(".btn1").click(function () { $(".box").offset({left:50,top:50}) }); </script> </body> </html>