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.onloadvar 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>

四.思维导图

jQuery(入门选择器）相关推荐

jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
【第一章】 jQuery入门---选择器 and $工具属性CSS
jQuery1:入门知识--选择器 3W1H What?是什么? JavaScript库:封装了很多JS代码 JavaScript库:jQuery(90%).E ...
jQuery 入门选择器
一.jQuery3.3.1 1.jQuery是什么? 简介:jQuery是一个快速.简洁的JavaScript框架,于2006年1月由John Resig发布.jQuery设计的宗旨是"wr ...
jQUery第一课（入门选择器）
思维导图一.笔记: 1. jQuery是什么?jQuery是一个快速.简洁的JavaScript框架. ...
jQuery01(入门选择器)
3W+1H(jQuery入门) jQuery是什么:是一个快速.简洁的JavaScript框架.是JavaScript库,里面封装了很多js代码. 倡导写更少的代码,做更多的事情,简化了JavaScr ...
jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
jQuery入门、选择器、事件、静态方法、动画
目录第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
jQuery入门基本语法选择器
文章目录一.了解什么是jQuery&为什么要学jQuery? 二.jQuery的基本语法? 三.jQuery如何使用? 四.jQuery的选择器? 五.推荐使用开发工具:HBuilder X ...