前端開發之jQuery篇--選擇器

時間 2020-05-22

標籤前端開發 jquery 選擇器欄目 JQuery 简体版

原文原文鏈接

主要內容：javascript

　一、jQuery簡介css

　二、jQuery文件的引入html

　三、jQuery選擇器java

　四、jQuery對象與DOM對象的轉換jquery

1、jQuery簡介ajax

　　一、介紹　編程

jQuery是一個JavaScript庫；極大簡化了JavaScript編程，因此學習難度大大下降。 jQuery 是一個「寫的更少，但作的更多」的輕量級 JavaScript 庫。

　　二、特性瀏覽器

　　　　jQuery是一個javascript函數庫。dom

　　三、jquery 和 JavaScript的區別　　　編程語言

Javascript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本； jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助咱們簡化javascript開發； jQuery能作的javascipt都能作到，而javascript能作的事情，jQuery不必定能作到。 注意： 通常狀況下，是庫的文件，該庫中都會拋出來構造函數或者對象，若是是構造函數，那麼使用new關鍵字建立對象，若是是對象直接調用屬性和方法

　　　　（1）執行時間不一樣　　　　　

JavaScript---window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 jQuery---$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

　　　　（2）編寫個數不一樣　

JavaScript --- window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 jQuery --- $(document).ready()能夠同時編寫多個，而且均可以獲得執行

　　　　（3）簡化寫法不一樣

JavaScript --- window.onload沒有簡化寫法 jQuery --- $(document).ready(function(){})能夠簡寫成 $(function(){})

　　四、下載方式

　　　　方式一：下載到本地，使用時導入，有兩個版本，一份是精簡的，另外一份是未壓縮的（供調試或閱讀）。

　　　　　　　　下載官方地址：http://jquery.com/download/#Download_jQuery

　　　　方式二：使用庫代替

　　　　　　　　Google和Microsoft對jQuery的支持都很好，能夠從Google 或 Microsoft 加載 CDN jQuery 核心文件。

　　　　　　　　如：使用Microsoft的CDN　　　　　　

<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>

2、jQuery文件的引入

　　使用jQuery第一步，就是要先引入jQuery，而後再寫相的jQuery代碼。　

// 注意：DOM元素加載完成以後就會調用 // 程序執行須要有入口函數 $(document).ready(function(){ alert(666); }) 等價於 $(function(){ alert(666); })

3、jQuery選擇器

　　一、基礎選擇器　　　

<script type="text/javascript"> // jQuery的入口函數  $(document).ready(function(){ // 基礎選擇器 //一、id選擇器  console.log($("#first")); $("#first").css('color','red'); //二、類選擇器  $('.third').css('color','green'); //三、標籤選擇器 // 設置一個值 // $('a').css('color','orange'); // 設置多個值  $('a').css({'color':'blue','font-size':'20px'}); // 四、通配符選擇器" * ",使用不是很頻繁  console.log($('*')); // 清空整個界面的dom元素 // $('*').html('');  }) </script>

　　完整代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery選擇器</title> </head> <body> <ul> <li id="first">我是第一個li標籤</li> <li><a href="https://home.cnblogs.com/u/schut/">暮光微涼</a></li> <li class="third">我是第三個li標籤</li> <li>我是一個li標籤</li> </ul> </body> <!--第一步，引入jQuery文件--> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // jQuery的入口函數  $(document).ready(function(){ // 基礎選擇器 //一、id選擇器  console.log($("#first")); $("#first").css('color','red'); //二、類選擇器  $('.third').css('color','green'); //三、標籤選擇器 // 設置一個值 // $('a').css('color','orange'); // 設置多個值  $('a').css({'color':'blue','font-size':'20px'}); // 四、通配符選擇器" * ",使用不是很頻繁  console.log($('*')); // 清空整個界面的dom元素 // $('*').html('');  }) </script> </html>

View Code

　　二、層級選擇器　

<script type="text/javascript"> // jQuery的入口函數  $(document).ready(function () { // 一、後代選擇器 div p  $('#box p').css( 'color','red' ); // $(".box2 p").css("font-size","30px"); // 二、子代選擇器 div > p  $('#box>p').css('color','green'); // $(".box2>p").css("color","red"); // 三、毗鄰選擇器---匹配被選中的那個元素後緊接着的下一個元素  $('#first+p').css('font-size','50px'); // $(".brother+li").css('font-size',"50px"); // 四、兄弟選擇器 --- 匹配被選中的那個元素以後全部的兄第姐妹元素  $('#first~p').css('blackground','orange'); // $('.brother~li').css("color",'pink'); // 五、獲取第一個元素/最後一個元素/選中指定的元素  $('li:first').css('font-size','25px'); $('li:last').css('font-size','10px'); $('li:eq(1)').css({'font-size':'25px','color':'pink'});// eq(int) int值從0開始  }) </script>

　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層級選擇器</title> </head> <body> <div id="box1"> <p id="first">111111</p> <p>222222</p> <p>333333</p> <div class="box2"> <p>222333</p> </div> </div> <ul> <li>one</li> <li class="brother">two</li> <li>three</li> <li>four</li> </ul> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // jQuery的入口函數  $(document).ready(function () { // 一、後代選擇器 div p  $('#box p').css( 'color','red' ); // $(".box2 p").css("font-size","30px"); // 二、子代選擇器 div > p  $('#box>p').css('color','green'); // $(".box2>p").css("color","red"); // 三、毗鄰選擇器---匹配被選中的那個元素後緊接着的下一個元素  $('#first+p').css('font-size','50px'); // $(".brother+li").css('font-size',"50px"); // 四、兄弟選擇器 --- 匹配被選中的那個元素以後全部的兄第姐妹元素  $('#first~p').css('blackground','orange'); // $('.brother~li').css("color",'pink'); // 五、獲取第一個元素/最後一個元素/選中指定的元素  $('li:first').css('font-size','25px'); $('li:last').css('font-size','10px'); $('li:eq(1)').css({'font-size':'25px','color':'pink'});// eq(int) int值從0開始  }) </script> </html>

View Code

　　三、基本過濾選擇器　

 <script type="text/javascript"> $(function(){ //first 獲取第一個元素/ last 最後一個元素  $('li:first').css('color','blue'); $('li:last').css('color','green'); // odd -- 匹配全部索引值爲奇數的元素，從0開始計數  $('li:odd').css('color','yellow'); // even -- 匹配全部索引值爲偶數的元素，從0開始計數  $('li:even').css('font-size','25px'); // 選中索引值爲1的運算  $('li:eq(2)').css('font-size','8px'); }) </script>

　　完整代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本過濾選擇器</title> </head> <body> <ul> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> </ul> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ //first 獲取第一個元素/ last 最後一個元素  $('li:first').css('color','blue'); $('li:last').css('color','green'); // odd -- 匹配全部索引值爲奇數的元素，從0開始計數  $('li:odd').css('color','yellow'); // even -- 匹配全部索引值爲偶數的元素，從0開始計數  $('li:even').css('font-size','25px'); // 選中索引值爲1的運算  $('li:eq(2)').css('font-size','8px'); }) </script> </html>

View Code

　　四、屬性選擇器　　

<script type="text/javascript"> $(document).ready(function () { // 標籤名[屬性名] 查找全部含有id/class屬性的該標籤名的元素  $('li[id]').css('color','red'); $('li[class]').css("color","gold"); // 匹配給定的屬性的元素  $('li[class=second]').css('font-size','20px'); $('button[class=btn-success]').css('background','blue'); // 匹配全部不含有或不等於指定屬性的元素  $('li[class!=second]').css('color','green'); // 匹配給定的屬性是以某些值開始的元素  $('input[name^=usename]').css('background','orange'); $('button[class^=btn]').css('color','pink'); // 匹配給定的屬性是以某些值結尾的元素  $('input[name$=2]').css('background','green'); $('button[class$=danger]').css('background','green'); // 匹配給定的屬性是以包含某些值的元素  $('button[class*=info]').css('background','red'); $('input[name*=usename]').css({'width':'100px','height':'25px'}); }) </script>

　　完整代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> </head> <body> <ul> <li id="one">第1個li標籤</li> <li id="two" class="second">第2個li標籤</li> <li class="third">第3個li標籤</li> <li>第4個li標籤</li> <li>第5個li標籤</li> </ul> <form action="" method="post"> <input name="usename" type="text" value="1" checked="checked"></input> <input name="usename2" type="text" value="1" ></input> <input name="usename3" type="text" value="1" ></input> <input name="usename4" type="text" value="1" ></input> <button class="btn-default">默認</button> <button class="btn-info">信息</button> <button class="btn-success">成功</button> <button class="btn-danger">警告</button> </form> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // 標籤名[屬性名] 查找全部含有id/class屬性的該標籤名的元素  $('li[id]').css('color','red'); $('li[class]').css("color","gold"); // 匹配給定的屬性的元素  $('li[class=second]').css('font-size','20px'); $('button[class=btn-success]').css('background','blue'); // 匹配全部不含有或不等於指定屬性的元素  $('li[class!=second]').css('color','green'); // 匹配給定的屬性是以某些值開始的元素  $('input[name^=usename]').css('background','orange'); $('button[class^=btn]').css('color','pink'); // 匹配給定的屬性是以某些值結尾的元素  $('input[name$=2]').css('background','green'); $('button[class$=danger]').css('background','green'); // 匹配給定的屬性是以包含某些值的元素  $('button[class*=info]').css('background','red'); $('input[name*=usename]').css({'width':'100px','height':'25px'}); }) </script> </html>

View Code

　　五、篩選選擇器　　

<script type="text/javascript"> // jQuery的入口函數  $(document).ready(function () { // 獲取第n個元素，從0開始  $('span').eq(0).css('color','gold'); $('li').eq(1).css({'font-size':'30px','color':'blue'}); // 獲取第一個元素：first,最後一個元素：last。 點方法:get和set方法  $('span').first().css('font-size','25px'); $('span').last().css('font-size','12px'); // .parent() 選取父級元素  $('span').parent('.p1').css({width:'200px',height:'200px',background:'green'}); $('#li_p').parent('ul').css('list-style','none'); // .siblings() 選取全部的兄弟元素  $('.cls-li').siblings('li').css('color','red'); $('.span1').siblings('span').css({'color':'orange','font-size':'22px'}); // .find() 查找全部的後代選擇器  $('div').find('button.btn1').css('color','pink'); $('ul').find('li').css({'font-size':'16px','color':'pink'}); }) </script>

　　完整代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>篩選選擇器</title> </head> <body> <div id="box1"> <p class="p1"> <span class="span1">我是第一個span標籤</span> <span>我是第二個span標籤</span> <span>我是第三個span標籤</span> </p> <button class="btn1">按鈕</button> <button class="btn2">按鈕</button> <ul> <li class="cls-li">1</li> <li>2</li> <li id="li_p"> <p>3</p> </li> <li>4</li> <li>5</li> </ul> </div> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // jQuery的入口函數  $(document).ready(function () { // 獲取第n個元素，從0開始  $('span').eq(0).css('color','gold'); $('li').eq(1).css({'font-size':'30px','color':'blue'}); // 獲取第一個元素：first,最後一個元素：last。 點方法:get和set方法  $('span').first().css('font-size','25px'); $('span').last().css('font-size','12px'); // .parent() 選取父級元素  $('span').parent('.p1').css({width:'200px',height:'200px',background:'green'}); $('#li_p').parent('ul').css('list-style','none'); // .siblings() 選取全部的兄弟元素  $('.cls-li').siblings('li').css('color','red'); $('.span1').siblings('span').css({'color':'orange','font-size':'22px'}); // .find() 查找全部的後代選擇器  $('div').find('button.btn1').css('color','pink'); $('ul').find('li').css({'font-size':'16px','color':'pink'}); }) </script> </html>

View Code

4、jQuery對象與DOM對象的轉換

　　一、DOM對象 ---> jQuery對象　

var domBox = document.getElementById("box"); console.log($(domBox)); $(domBox).click(funtion(){ alert(668) ; })

　　二、jQuery對象 ---> DOM對象　

// 方式一： console.log($("buttn")[0]); //方式二： console.log($('button').get(0)); var isShow = true; $('button').get(0).onclick = function(){ if(isShow) { $('#box').hide(); $(this).text("顯示")； } else { $("#box".show()); $(this).text(""隱藏好); isShow = true; } }

　　完整代碼：　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery對象與DOM對象的轉換</title> </head> <body> <div id="box"> 我是一個盒子 </div> <button>隱藏</button> </body> <script src="../jquery-3.2.1.js"></script> <script type="text/javascript"> // jQuery入口函數 //DOM----> jQuery對象 var oDiv = document.getElementById('box'); console.log($(oDiv)); $(oDiv).click(function () { alert(666); }); // jquery對象轉化成DOM對象 // 第一種方式  console.log($('button')[0]); // 第二種方式  console.log($('button').get(0)); var isShow = true; $('button').get(0).onclick = function () { // alert(233); // $('#box').hide(); // hide() 隱藏方法 // console.log($(this)); if(isShow){ $('#box').hide(); $(this).text('顯示'); isShow = false; } else{ $('#box').show(); $(this).text('隱藏'); isShow = true; } } </script> </html>