一、jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() ??????????//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 ???????// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; ???????//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 ??????//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]：jquery对象转为dom对象 ?????$("#msg").html(); $("#msg")[0].innerHTMLjquery的基础语法：$(selector).action()
二、寻找元素(选择器和筛选器)
2.1 选择器
2.1.1 基本选择器
$("*") ?$("#id") ??$(".class") ?$("element") ?$(".class,p,div")2.1.2 层级选择器
$(".outer div")#选择后代(子孙代) ?$(".outer>div")#选择子代 ??$(".outer+div")#与outer紧挨着的同极的,且在outer下方的标签 ?$(".outer~div")#不用与outer紧挨着的同级的，且在outer下方的标签2.1.3 基本筛选器
$("li:first") ?$("li:eq(2)")#选择第三个<li> ?$("li:even")#选择偶数行的<li> ?$("li:odd(1)")#选择基数行的<li> ?$("li:gt(1)")#选择从第一个位置往后的<li>2.1.4 属性选择器
$(‘[id="div1"]‘)
2.1.5 表单选择器
$("[type=‘text‘]")----->$(":text") ????????注意只适用于input标签 ?: $("input:checked")实例之左侧菜单
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body{ ???????????margin: 0; ???????} ???????.outer{ ???????????height: 1500px; ???????????width: 100%; ???????} ???????.menu{ ???????????float: left; ???????????height: 1000px; ???????????width: 30%; ???????????background-color: yellow; ???????} ???????.content{ ???????????float: left; ???????????height: 1000px; ???????????width: 70%; ???????????background-color: lightgreen; ???????} ???????.hide{ ????????????display: none; ????????} ???</style></head><body><div class="outer"> ???<div class="menu"> ????????<div class="item"> ???????????<div class="title" onclick="show(this)">菜单一</div> ???????????<div class="con hide"> ???????????????<div>111</div> ???????????????<div>111</div> ???????????????<div>111</div> ???????????</div> ???????</div> ???????<div class="item"> ???????????<div class="title" onclick="show(this)">菜单二</div> ???????????<div class="con hide"> ???????????????<div>111</div> ???????????????<div>111</div> ???????????????<div>111</div> ???????????</div> ???????</div> ???????<div class="item"> ???????????<div class="title" onclick="show(this)">菜单三</div> ???????????<div class="con hide"> ???????????????<div>111</div> ???????????????<div>111</div> ???????????????<div>111</div> ???????????</div> ???????</div> ???</div> ???<div class="content"></div></div><script src="jquery-3.3.1.js"></script><script> ???function show(self) { ???????$(self).next().removeClass("hide"); ???????$(self).parent().siblings(".item").children(".con").addClass("hide"); ???}</script></body></html>实例之tab切换
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>tab</title> ???<script> ??????????function tab(self){ ??????????????var index=$(self).attr("xxx"); ??????????????$("#"+index).removeClass("hide").siblings().addClass("hide"); ??????????????$(self).addClass("current").siblings().removeClass("current"); ??????????} ???</script> ???<style> ???????*{ ???????????margin: 0px; ???????????padding: 0px; ???????} ???????.tab_outer{ ???????????margin: 0px auto; ???????????width: 60%; ???????} ???????.menu{ ???????????background-color: #cccccc; ???????????/*border: 1px solid red;*/ ???????????line-height: 40px; ???????} ???????.menu li{ ???????????display: inline-block; ???????} ???????.menu a{ ???????????border-right: 1px solid red; ???????????padding: 11px; ???????} ???????.content{ ???????????background-color: tan; ???????????border: 1px solid green; ???????????height: 300px; ???????} ???????.hide{ ???????????display: none; ???????} ???????.current{ ???????????background-color: darkgray; ???????????color: yellow; ???????????border-top: solid 2px rebeccapurple; ???????} ???</style></head><body> ?????<div class="tab_outer"> ?????????<ul class="menu"> ?????????????<li xxx="c1" class="current" onclick="tab(this);">菜单一</li> ?????????????<li xxx="c2" onclick="tab(this);">菜单二</li> ?????????????<li xxx="c3" onclick="tab(this);">菜单三</li> ?????????</ul> ?????????<div class="content"> ?????????????<div id="c1">内容一</div> ?????????????<div id="c2" class="hide">内容二</div> ?????????????<div id="c3" class="hide">内容三</div> ?????????</div> ?????</div></body></html>2.2 筛选器
2.2.1 过滤筛选器
$("li").eq(2)#比$("li:eq(2)")写法灵活 ?$("li").first() ?$("ul li").hasclass("test")2.2.2 查找筛选器
$("div").children(".test") ????$("div").find(".test") ?????????????????????????????????$(".test").next() ???$(".test").nextAll() ???$(".test").nextUntil() #往下开始到"xxx"停止(不包括两边) ???????????????????????????$("div").prev() ?$("div").prevAll() ?$("div").prevUntil() ???????????????????????????$(".test").parent() ?$(".test").parents() ?$(".test").parentUntil() ?$("div").siblings()#获取标签的兄弟(上下)三、操作元素(属性，css，文档处理)
3.1 属性操作
--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------HTML代码/文本/值$("").html([val|fn])#$("").html()--->获取html和文本 ?$("").html("<h1>hello world</h1>")--->替换成括号里面的html$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("").css("color","red")注意：
<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见<script>//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此//需要使用prop方法去操作才能获得正确的结果。// ???$("#chk1").attr("checked")// ???undefined// ???$("#chk1").prop("checked")// ???false// ?---------手动选中的时候attr()获得到没有意义的undefined-----------// ???$("#chk1").attr("checked")// ???undefined// ???$("#chk1").prop("checked")// ???true ???console.log($("#chk1").prop("checked"));//false ???console.log($("#chk2").prop("checked"));//true ???console.log($("#chk1").attr("checked"));//undefined ???console.log($("#chk2").attr("checked"));//checked</script>attr和prop<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><p>000</p><p>000</p><p>000</p><script src="jquery-3.3.1.js"></script><script> ???arr = [1,2.3]; ???//方式一 ???$.each(arr, function (x, y ) { ???????console.log(x); ???????console.log(y); ???}); ???//方式二 ???$("p").each(function () { ???????console.log($(this)); ???????$(this).html("hello world"); ???});</script></body></html>全选反选例子
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="jquery-1.11.3.min.js"></script> ???<script> ????????????function selectall(){ ????????????????$("table :checkbox").prop("checked",true) ????????????} ????????????function cancel(){ ????????????????$("table :checkbox").prop("checked",false) ????????????} ????????????function reverse(){ ????????????????// ????????????????var idlist=$("table :checkbox")// ????????????????for(var i=0;i<idlist.length;i++){// ????????????????????var element=idlist[i];//// ????????????????????var ischecked=$(element).prop("checked")// ????????????????????if (ischecked){// ????????????????????????$(element).prop("checked",false)// ????????????????????}// ????????????????????else {// ????????????????????????$(element).prop("checked",true)// ????????????????????}//// ????????????????}// ???jquery循环的两种方式 ????????????????//方式一// ????????????????li=[10,20,30,40]// ????????????????dic={name:"yuan",sex:"male"}// ????????????????$.each(li,function(i,x){// ????????????????????console.log(i,x)// ????????????????}) ????????????????//方式二// ???????????????????$("tr").each(function(){// ???????????????????????console.log($(this).html())// ???????????????????}) ????????????????$("table :checkbox").each(function(){ ????????????????????$(this).prop("checked",!$(this).prop("checked"));// ????????????????????if ($(this).prop("checked")){// ????????????????????????$(this).prop("checked",false)// ????????????????????}// ????????????????????else {// ????????????????????????$(this).prop("checked",true)// ????????????????????} ????????????????????// 思考:如果用attr方法可以实现吗? ????????????????}); ????????????} ???</script></head><body> ????<button onclick="selectall();">全选</button> ????<button onclick="cancel();">取消</button> ????<button onclick="reverse();">反选</button> ????<table border="1"> ????????<tr> ????????????<td><input type="checkbox"></td> ????????????<td>111</td> ????????</tr> ????????<tr> ????????????<td><input type="checkbox"></td> ????????????<td>222</td> ????????</tr> ????????<tr> ????????????<td><input type="checkbox"></td> ????????????<td>333</td> ????????</tr> ????????<tr> ????????????<td><input type="checkbox"></td> ????????????<td>444</td> ????????</tr> ????</table></body></html>模态对话框例子
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.back{ ???????????background-color: rebeccapurple; ???????????height: 2000px; ???????} ???????.shade{ ???????????position: fixed; ???????????top: 0; ???????????bottom: 0; ???????????left:0; ???????????right: 0; ???????????background-color: coral; ???????????opacity: 0.4; ???????} ???????.hide{ ???????????display: none; ???????} ???????.models{ ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????margin-left: -100px; ???????????margin-top: -100px; ???????????height: 200px; ???????????width: 200px; ???????????background-color: gold; ???????} ???</style></head><body><div class="back"> ???<input id="ID1" type="button" value="click" onclick="action1(this)"></div><div class="shade hide"></div><div class="models hide"> ???<input id="ID2" type="button" value="cancel" onclick="action2(this)"></div><script src="jquery-1.11.3.min.js"></script><script> ???function action1(self){ ???????$(self).parent().siblings().removeClass("hide"); ???} ???function action2(self){ ???????//$(self).parent().parent().children(".models,.shade").addClass("hide") ???????$(self).parent().addClass("hide").prev().addClass("hide") ???}</script></body></html>3.2 文档处理
//创建一个标签对象 ???$("<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]])3.3 CSS操作
CSS ???????$("").css(name|pro|[,val|fn]) ???位置 ???????$("").offset([coordinates]) # 标签距离视图的偏移量(top和left) ???????$("").position() ???????$("").scrollTop([val]) ???????$("").scrollLeft([val]) ???尺寸 ???????$("").height([val|fn]) ???????$("").width([val|fn]) ???????$("").innerHeight() ???????$("").innerWidth() ???????$("").outerHeight([soptions]) ???????$("").outerWidth([options])返回顶部操作例子
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script src="js/jquery-2.2.3.js"></script> ???<script> ?????????window.onscroll=function(){ ?????????????var current=$(window).scrollTop(); ?????????????console.log(current) ?????????????if (current>100){ ?????????????????$(".returnTop").removeClass("hide") ?????????????} ?????????????else { ?????????????$(".returnTop").addClass("hide") ?????????} ?????????} ??????????function returnTop(){// ??????????????$(".div1").scrollTop(0); ??????????????$(window).scrollTop(0) ??????????} ???</script> ???<style> ???????body{ ???????????margin: 0px; ???????} ???????.returnTop{ ???????????height: 60px; ???????????width: 100px; ???????????background-color: darkgray; ???????????position: fixed; ???????????right: 0; ???????????bottom: 0; ???????????color: greenyellow; ???????????line-height: 60px; ???????????text-align: center; ???????} ???????.div1{ ???????????background-color: orchid; ???????????font-size: 5px; ???????????overflow: auto; ???????????width: 500px; ???????} ???????.div2{ ???????????background-color: darkcyan; ???????} ???????.div3{ ???????????background-color: aqua; ???????} ???????.div{ ???????????height: 300px; ???????} ???????.hide{ ???????????display: none; ???????} ???</style></head><body> ????<div class="div1 div"> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????????<p>hello</p> ????</div> ????<div class="div2 div"></div> ????<div class="div3 div"></div> ????<div class="returnTop hide" onclick="returnTop();">返回顶部</div></body></html>jQuery
原文地址：https://www.cnblogs.com/linyuhong/p/10338598.html