前端开发之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>

View Code

回顶部↑