1.js和jquery对象的转换
js==>jquery对象 $(js对象)
jquery==>js jq对象[index] jq对象.get(index)
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<ul> ???????<li class="item">qing</li> ???????<li>qingqing</li> ???????<li>qingqingqing ???</ul> ???<script src="jquery.js"></script> ???<script> ???????//js innerText innerHTML value ???????//标签属性的操作 ?.src ?.href .id .claaName ???????//样式 .style.属性 ???????//DOM操作 ???????var datas = ["red","green","yellow"] ???????//1.jquery对象转化成js对象（js包含jquery） ???????// console.log($("li")[0]); ???????var item = document.getElementsByClassName("item")[0]; ???????//让js对象转换成jquery对象 ???????// console.log($(item)); ???????console.log($(item).css("color","red").click(function(){ ???????????alert(1111); ???????})) ???????//链式编程 ???????$(item).css("color","red").click(function(){ ???????????alert(111); ???????}) ???????for(var i = 0;i < datas.length;i++){ ???????????$("li")[i].style.backgroundColor = datas[i]; ???????} ???</script></body></html>2.选择器：选中标签对应的jq对象
jq高级选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div class="box"> ??????<p id="a">qing</p> ???????<p>q</p> ???????<p>ing</p> ???</div> ???<p>zhang</p> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????// $(".box>p").css("color","green"); ???????????//挨着的下一个兄弟元素 ???????????console.log($("#a+p")); ???????}) ???</script></body></html>基本过滤选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<ul> ???????<li>a</li> ???????<li>b</li> ???????<li>c</li> ???????<li>d</li> ???</ul> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????var i = 2; ???????????$(`ul li:eq(${i})`).css("color","red"); ???????????$("ul li:first").css("color","red"); ???????????$("ul li:last").css("color","red"); ???????}) ???</script></body></html>属性选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????input[type="text"]{ ???????????border: none; ???????????outline: none; ???????????width: 200px; ???????????height: 100px; ???????????font-size: 30px; ???????????border: 1px solid red; ???????} ???</style></head><body> ???<form action="#"> ???????<input type="text" name="user" aaa="bbb"> ???????<input type="password" name="pwd"> ???????<input type="submit" > ???</form> ???<script src="jquery.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????console.log($("input[type=text]")); ???????}) ???</script></body></html>筛选选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div class="father"> ???????<p>qing</p> ???????<a href="#">asd</a> ???????<span>qwe</span> ???????<div class="g"> ???????????<span>91</span> ???????</div> ???</div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????// console.log($(".father").find(".g")); ???????????$(".g").click(function () { ???????????????//js对象 ???????????????// console.log(this); ???????????????// $(this).css("color","red"); ???????????}); ???????????//find()方法会找到后代无论是子代还是子孙 ???????????// console.log($(".father").find("span")); ???????????//谁触发了点击事件this就是谁 ???????????// $(".father").find(".g>span").click(function () { ???????????// ????console.log(this) ???????????// }) ???????????//只找子代 ???????????console.log($(".father").children("span")); ???????????//parent()获取的是亲爹 ???????????console.log($(".g span").parent()); ???????}) ???</script></body></html>3.siblings方法（排他思想）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><ul> ???<li>a</li> ???<li>b</li> ???<li>c</li> ???<li>d</li></ul> ???<script src="jquery.js"></script><script> ???$(function () { ???????//点元素 变红色 ???????$("ul li").click(function () { ???????????$(this).css("color","red").siblings("li").css("color","black"); ???????}) ???})</script></body></html>4.选项卡
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????ul{ ???????????list-style:none; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.box{ ???????????width: 400px; ???????????height: 300px; ???????} ???????.box ul { ???????????width: 100%; ???????????overflow: hidden; ???????} ???????.box ul li{ ???????????float: left; ???????????width: 50px; ???????????height: 70px; ???????????margin: 0 10px; ???????????background-color: red; ???????????text-align: center; ???????????line-height: 70px; ???????} ???????a{ ???????????color: #fff; ???????} ???????.active{ ???????????width: 100%; ???????????height: 100px; ???????????background-color: green; ???????????display: none; ???????} ???????</style></head><body> ???<div class="box"> ???????<ul> ???????</ul> ???????<div class="active"> ???????</div> ???????<form action="#"> ???????????<input type="text" value="123"> ???????</form> ???</div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????console.log($("input[type=text]").val("111")); ???????????//初始化操作 ???????????$(".box ul").html(`<li> ???????????????<a href="javascript:void(0);">张三</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">李四</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">王五</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">赵六</a> ???????????</li>`); ???????????//点击a标签的时候执行的操作 ???????????$(".box ul li a").click(function () { ???????????????$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff"); ???????????????var textVal = $(this).text(); ???????????????var newVal = `<h1>${textVal}</h1>`; ???????????????$(".active").show().html(newVal); ???????????}) ???????}) ???</script></body></html>5.动画
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????} ???</style></head><body> ???<button id="btn">动画</button> ???<div class="box"></div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????$("#btn").click(function () { ???????????????// $(".box").hide(); ???????????????//toggle自己判断显隐状态 ???????????????$(".box").stop().toggle(1000); ???????????}) ???????}) ???</script></body></html>6.自定义动画
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div { ???????????position: absolute; ???????????left: 20px; ???????????top: 30px; ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????} ???</style></head><body> ???<button>动画</button> ???<div></div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????// $(‘div‘).animate( ???????????// { ???????????// ????param1: value1, ???????????// ????param2: value2 ???????????// }, ???????????// speed, ???????????// function() { ???????????// ????/* stuff to do after animation is complete */ ???????????// }); ???????????$("button").click(function () { ???????????????var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; ???????????????var json2 = { ???????????????????"width": 100, ???????????????????"height": 100, ???????????????????"left": 100, ???????????????????"top": 100, ???????????????????"border-radius": 100, ???????????????????"background-color": "red" ???????????????}; ???????????????//自定义动画 ???????????????$("div").animate(json, 1000, function () { ???????????????????$("div").animate(json2, 1000, function () { ???????????????????????alert("动画执行完毕！"); ???????????????????}); ???????????????}); ???????????}) ???????}) ???</script></body></html>7.html的标签属性操作
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.tt{ ???????????color: red; ???????} ???????.active{ ???????????color: green; ???????} ???</style></head><body> ???<div class="box"> ???</div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????//初始化操作 ???????????// $(".box").html("<a href=‘http://www.baidu.com‘>百度一下</a>"); ???????????$(".box").html("<a id=‘anchor‘></a>"); ???????????$("#anchor").attr("href","http://www.baidu.com").text("百度一下"); ???????????console.log($("#anchor").attr("id")); ???????????$("#anchor").attr({ ???????????????title:"123", ???????????????class:"tt" ???????????}); ???????????$("body").click(function () { ???????????????// $("#anchor").attr("class","active"); ???????????????$("#anchor").addClass("active"); ???????????????//移除多个类名 ???????????????$("#anchor").removeClass("active tt"); ???????????????$("#anchor").removeAttr("title href"); ???????????}) ???????}) ???</script></body></html>8.prop标签对象属性操作
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???男<input type="radio" name="sex" checked> ???女<input type="radio" name="sex"> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????// console.log($("input[type=radio]").eq(0).attr("checked")); ???????????console.dir($("input[type=radio]").eq(1).prop("checked")); ???????????$("input[type=radio]").eq(1).prop("abc","123"); ???????????console.log($("input[type=radio]").eq(1)); ???????}) ???</script></body></html>9.控制元素显示隐藏
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????} ???????.hidden{ ???????????display: none; ???????} ???</style></head><body> ???<button>隐藏</button> ???<div class="box"></div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????// var isShow = true; ???????????// $("button").click(function () { ???????????// ????if (isShow){ ???????????// ????????$(".box").addClass("hidden"); ???????????// ????????isShow = false; ???????????// ????} else{ ???????????// ????????$(".box").removeClass("hidden"); ???????????// ????????isShow = true; ???????????// ????} ???????????// }) ???????????$("button").click(function () { ???????????????$(".box").toggleClass("hidden"); ???????????}) ???????}) ???</script></body></html>10.选项卡的嵌套
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????ul{ ???????????list-style: none; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.box{ ???????????width: 400px; ???????????height: 300px; ???????} ???????.box ul{ ???????????width: 100%; ???????????overflow: hidden; ???????} ???????.box ul li{ ???????????float: left; ???????????width: 50px; ???????????height: 70px; ???????????margin: 0 10px; ???????????background-color: red; ???????????text-align: center; ???????????line-height: 70px; ???????} ???????a{ ???????????color: #fff; ???????} ???????.active{ ???????????width: 100%; ???????????height: 100px; ???????????background-color: green; ???????????display: none; ???????} ???????.show{ ???????????display: block; ???????} ???</style></head><body> ??<button class="next">下一张</button> ???<div class="box"> ???????<ul> ???????????<li> ???????????????<a href="javascript:void(0);">张三</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">李四</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">王五</a> ???????????</li> ???????????<li> ???????????????<a href="javascript:void(0);">赵六</a> ???????????</li> ???????</ul> ???????<div class="active"></div> ???????<div class="active"></div> ???????<div class="active"></div> ???????<div class="active"></div> ???</div> ??<script src="jquery.js"></script> ??<script> ??????$(function () { ???????????var count = 0; ???????????$(".next").click(function () { ???????????????console.log(1) ???????????????count++; ???????????????$(‘ul li‘).eq(count).css(‘backgroundColor‘,‘green‘).siblings(‘li‘).css(‘backgroundColor‘,‘red‘); ???????????????$("div.active").eq(count).addClass("show").html("abc").siblings("div.active").removeClass("show"); ???????????}) ???????????$(".box ul li a").click(function () { ???????????????$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff"); ???????????????//index()方法获取索引 ???????????????console.log($(this).parent().index()); ???????????}) ??????}) ??</script></body></html>jquery基础知识2
原文地址：https://www.cnblogs.com/qq849784670/p/9726487.html