jQuery介紹——新手必看
一、入口函式
1.JS入口函式 window.onload=function(){ //執行內容 }
2.jquery入口函式 $(documnet).ready(function(){ //執行內容 }); 或者 $(function(){ //執行內容 });
二、原生js節點向jquery轉換
var div=document.getElementById("box"); $("#box").get(0)與div相同
三、jquery-css基礎選擇器
<body> <div id="box" class="div1" style="width: 100px;height: 100px;background: red"></div> <script src="jquery.js"></script> <script> $("#box").css("background","green"); $(".div1").css("background","skyblue"); </script> </body>
1.層次選擇器
$("*").css("background","green"); $("ul li:first").css("background","pink"); $("li:even").css("background","blue"); $("li:odd").css("background","green"); //緊鄰選擇器，後面一個 $("li.demo+li").css("background","pink"); //相鄰選擇器，後面所有 $("li.demo~li").css("background","pink");
2.表單域選擇器
$(":text").val("請輸入你的名字"); $(":password").val("12345"); $("p:hidden").show(3000); $(":disable") $(":visiable")
3.偽類選擇器
$("li:first").css("background","red"); $("li:last").css("background","blue"); $("li:even").css("background","skyblue"); $("li:odd").css("background","pink"); $("li:eq(1)").css("background","red"); $("li:not(:empty)").css("background","blue");
4.內容選擇器
$("p:contains('足球小子')").css("color","red"); $("p:has('span')").css("color","blue");
5.屬性選擇器
$("input[type='text']").val(""); $("input[type*='t']").val(""); $("input[type^='t']").val(""); $("input[type~='text']").val(""); $("input[type!='text']").val("");
6.子元素過濾器
$("ul li:first")選取第一個<ul>元素的第一個<li>元素 $("li:first").css("background","red"); $("li:last").css("background","blue");
$("ul li:first-child")選取每個<ul>元素的第一個<li> 元素 $("li:first-child").css("background","red"); $("li:last-child").css("background","blue");
//ele:nth-of-type(n)是指父元素下第n個ele元素， ele:nth-child(n)是指父元素下第n個元素且這個元素為ele，若不是，則選擇失敗。 $("li:nth-child(2)").css("background","skyblue"); $("li:nth-of-type(2)").css("background","pink");
四、jQuery函式
//jquery的html函式中如果傳引數就將html中的值修改為引數;如果不傳引數那麼就獲取html中的值 $("#box").html("shide"); //text()獲取dom節點中的文字 $("#box").text(); //attr()獲取和設定屬性 $("#box").attr("style","background:blue"); //removeAttr()刪除屬性 $("#box").removeAttr("style"); //獲取元素的個數 $('div').size();
$('div').addClass(); $('div').removeClass();
1.操作樣式
$("#btn").click(function(){ $("#box").css("background","blue"); }); 2.遍歷dom節點
//parents()它的父元素和祖先元素 console.log($(".main").parents("div")); //它的孩子 console.log($(".main").children()); //find() console.log($(".main").find(".con").siblings()); console.log($(".main").find(".con1").prev()); console.log($(".main").find(".con").next());
3.標籤頁 <ul> <li data-index="0">首頁</li> <li data-index="1">我的</li> <li data-index="2">設定</li> <div class="red" hidden>首頁</div> <div class="red" hidden>我的</div> <div class="red" hidden>設定</div> </ul> <script src="jquery.js"></script> <script> $("li").click(function(){ $(this).attr("class","red").siblings("li").attr("class","strans"); $($("div")[this.dataset.index]).show().siblings("div").hide(); }); </script>
4.插入dom節點 <ul> <li class="0">首頁</li> <li class="1">我的</li> <li class="2">設定</li> </ul> <script src="jquery.js"></script> <script> $("li.1").insertBefore($("li.0")); $("li.0").insertBefore($("li.1")); $("li.0").append($("li.2")); $("li.2").appendTo($("li.0")); </script>
5.刪除元素 $("").remove(); $("").empty();
6.替換元素 $("").replaceAll($("目標元素")); $("目標元素").replaceWith($(""));
<button>這是一個按鈕</button> <p>這是一段話</p> <script src="jquery.js"></script> <script> // 生成DOM節點 // $("<p>這是一段話</p>") // $("button").replaceWith("<p>這是一段話</p>");
$("<p>這是一段話</p>").replaceAll($("button")); </script>
7.克隆元素 $("a").click(function() { alert("彈出") });
$("a").clone(true).appendTo($("body"));
8.js輪播圖 <script> var prev=document.getElementsByClassName("prev")[0]; var next=document.getElementsByClassName("next")[0]; var ul=document.getElementsByTagName("ul")[0]; var num=1; var header=0; var target=0; prev.onclick=function(){ if(num==3){ ul.style.left="0px"; num=1; header=0; target=0; } target=num*-960; num++; } next.onclick=function(){ if(num<=0) { return } num --; target = num*-960; } setInterval(function(){ header=header+(target-header)/10; ul.style.left=header+"px"; },20); </script>
9.jquery輪播圖 <script> var num=0; var step=-960; $(".prev").click(function(){ console.log(num); if(num==3){ $("ul").css("left",0); num=0; } num++; $("ul").animate({ left:num*step, easing:"swing" },1000); }) $(".next").click(function(){ if(num==0){ return; } num--; $(".ul").animate(function(){ left:num*step, easing:"swing" }) },1000); </script>