jQuery(入门&选择器）

一，简介

jQuery的"3W1H"：What,why,Where,How

1.jQuery是什么（What）

jQuery是一个JavaScipt库（由JavaScript专家John Resig 创建的）

由于这个库有很多优点，所以相当流行，全世界10000个最常被访问的网站中，有31%都利用了jQuery

2.为什么要使用jQuery(why/好处/优势）
2.1,轻量级.

JQuery非常小,压缩包只有18KB左右.

2.2,强大的选择器.

JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器.

2.3,出色的DOM操作封装.

JQuery封装了大量常用的DOM操作.

2.4,兼容性好.

JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异.

2.5,链式编程

即对发生在同一个JQuery对象上的一组动作,可以直接连写而无需重复获取对象,使得JQuery的代码无比优雅.

2.6,隐式迭代

当用JQuery找到带有".class"类的全部元素,然后隐藏它们时,无需循环遍历每个返回的元素.

2.7,行为与结构分离

2.8,丰富的插件支持

2.9,开源

任何人都可以自由使用并提出自己的意见.

JQuery的核心理念是:写得少,做得多(write less,do more)

3.什么时候使用（Where）
中大型网站的开发。
是一些前端框架的基础，比如EasyUI，Bootstrap。

4.如何使用（How）
    可以免费到www.jquery.com上下载

    因为它只是一个库，所以肯定要把它放到项目的指定文件夹中，或者可以直接引用它的绝对路径

          (注意是.html文件，不能是.php呀,虽然都是脚本语言，一个工作在浏览器端，一个工作在服务器端，怎么能混呢)

二，jQuery使用三曲

第一步：下载jQuery库（选择适合自己的)，列如：jquery-3.3.1js[开发者版本]，jquery-3.3.1min.js[生产者版本]。

第二步：将jquery文件复制到js项目中

第三步：使用

3.1：引入外部jQuery的类库引入后需另起一块

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//里面写函数
</script>

$=jQuery

3.2：页面载入函数

<script type="text/javascript">
			//页面载入函数	加载DOM
			$(function() { //相当于window.onload
						var b= $("#btnb");//拿到按钮
						b.click(function(){//添加点击事件
							var a=$("#aa").val();//拿到文本框的值
							alert(a);
						})
</script>

例1：点击"提交“按钮获取文本框的值

三，jQuery选择器

1，基本选择器

常用选择器：
1. ID选择器：#D
2. 类选择器：.class
3. 元素选择器：element
4.通配符：*
5.多个选择器（并集）selector1,selector2
6.多个选择器（交集）selector1,selector2

案例二：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）

2.层次选择器

案例三：使用层次选择器选择某个元素下面的所有元素和子元素

3、过滤选择器

第一个元素：first
最后一个元素：last
偶数下标的元素：even
奇数下标的元素：odd
获取某一范围的元素：
:gt大于...
:lt小于...

案例四：使用过滤器选择li中的元素

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       
       <script type="text/javascript">
           //页面载入函数   加载DOM
           $(function() { //相当于window.onload
               //$("ul>li:first").css("background-color", "pink"); //第一个
               //$("ul>li:last").css("background-color", "pink"); //最后一个
               //$("ul>li:even").css("background-color", "pink"); //偶数下标
               //$("ul>li:odd").css("background-color", "pink"); //奇数下标
               //$("ul>li:gt(0)").css("background-color", "pink"); //大于0
               //$("ul>li:lt(4)").css("background-color", "pink"); //小于4
               //让下标大于0 小于4 的行变色
               $("ul>li:lt(4):gt(0)").css("background-color", "pink");
           })
       </script>
   </head>
   <body>
       <h4>过滤选择器</h4>
       <ul>
           <li>0-文质彬彬</li>
           <li>1-翩翩起舞</li>
           <li>2-水性杨花</li>
           <li>3-生机勃勃</li>
           <li>4-栩栩如生</li>
       </ul>
   </body>
</html>

案例五：使用过滤器让表格隔行变色

代码展示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       </style>
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       
       <script type="text/javascript">
           //页面载入函数   加载DOM
           $(function() { //相当于window.onload
               $("table tr:even").css("background-color","gold");
               $("table tr:odd").css("background-color","aqua");
           })
       </script>
   </head>
   <body>
       <h4>表格隔行换色</h4>
       <table border="1px" width="50%">
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
           <tr>
               <td> </td>
               <td> </td>
           </tr>
       </table>
   </body>
</html>

运行结果：

4、表单选择器

获取选择单选框的值：

input:radio:checked

获取选择多选框的值：

input:checkbox:checked

获取选择下拉值：

select option:selected

案例一：获取表单中的单选、多选and下拉框的值

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       </style>
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       
       <script type="text/javascript">
           //页面载入函数   加载DOM
           $(function() { //相当于window.onload
               //表单选择器
               //给按钮添加选择器
               $("#ok").click(function() {
                   //拿性别
                   /* var sex= $("#myForm input:radio:checked").val();
                   console.info(sex); */

                   //拿爱好
                   /* $("#myForm input:checkbox:checked").each(function(){
                       console.info($(this).val());
                   }) */

                   //拿地址
                   var add=$("#myForm select option:selected").val();
                       console.info(add);
                   })
           })
       </script>
   </head>
   <body>
       <h4>表单选择器</h4>
       <form action="" id="myForm">
           性别：<input type="radio" value="男" name="sex" />男
           <input type="radio" value="女" name="sex" />女<br />
           爱好：<input type="checkbox" value="看美女" />看美女
           <input type="checkbox" value="健身" />健身
           <input type="checkbox" value="敲代码" />敲代码
           <input type="checkbox" value="打游戏" />打游戏<br />
           地址：
           <select>
               <option value="湖南省">湖南省</option>
               <option value="广东省">广东省</option>
               <option value="江西省">江西省</option>
               <option value="江西省">浙江省</option>
           </select><br />
           <input type="button" value="提交" id="ok" />
       </form>
   </body>
</html>

四.思维导图

原文链接：https://blog.csdn.net/weixin_64313980/article/details/123535640