JQuery

 

JQuery

jQuery描述

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

JQuery版本

版本一：1.x版本  :兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

版本二：2.x版本:  不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

版本二：3.x版本: 不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

jQuery引包

在使用jQuery之前，先把jQuery文件引到页面中来

如果在使用jQuery之前，没有引用jQuery文件，会报错：

src路径一定要写正确,如果src路径写错，也会报错：

 

src路径可以写本机文件地址,也可以写网络cdn连接

jQuery的入口函数（重点)

 

jQuery入口函数与js入口函数的区别

js入口函数指的是：window.onload = function() {};

区别一：书写个数不同

    Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

    jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

    Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

    jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

 jQuery的$符号（重点）

js命名规范允许出现的字符有：数字、字母、下划线、$。

  1. var $ = “我是字符串”;
  2. var $ = 123;
  3. function $(){
  4.     alert(“我是函数$”);
  5. }

jQuery使用$符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery这个js库，除了$之外，还提供了另外一个函数：jQuery

jQuery函数跟$函数的关系：jQuery ===$;

怎么理解jQuery里面的$符号：

$实际上表示的是一个函数。

  1. $(); // 调用上面我们自定义的函数$
  2. $(document）.ready(function(){}); // 调用入口函数
  3. $(function(){}); // 调用入口函数
  4. $(“#btnShow”) // 获取id属性为btnShow的元素
  5. $(“div”) // 获取所有的div元素

jQuery里面的$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象

jQuery对象和DOM对象的相互转换（难点）

  1. var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
  1. var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

DOM对象转换成jQuery对象：

  1. var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
  2. // $(document）.ready(function(){}); // 调用入口函数
  3. // 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

jQuery对象转换成DOM对象：

  1. // 第一种方式
  2. var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
  3. // 第二种方式
  4. var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

 

JQuery选择器

基本选择器

id选择器

  1. $("#id")

标签选择器

  1. $("tagName")

class选择器

  1. $(".className")

所有元素选择器：

  1. $("*")

配合使用：

  1. $("div.c1")  // 找到有c1 class类的div标签

组合选择器

  1. $("#id, .className, tagName")

层级选择器

  1. // x和y可以为任意选择器
  2. $("x y");// x的所有后代y（子子孙孙）
  3. $("x > y");// x的所有儿子y（儿子）
  4. $("x + y")// 找到所有紧挨在x后面的y
  5. $("x ~ y")// x之后所有的兄弟y

基本筛选器

复制代码
  1. :first // 第一个
  2. :last // 最后一个
  3. :eq(index)// 索引等于index的那个元素
  4. :even // 匹配所有索引值为偶数的元素，从 0 开始计数
  5. :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
  6. :gt(index)// 匹配所有大于给定索引值的元素
  7. :lt(index)// 匹配所有小于给定索引值的元素
  8. :not(元素选择器)// 移除所有满足not条件的标签
  9. :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
复制代码

例子：

  1. $("div:has(h1)")// 找到所有后代中有h1标签的div标签
  2. $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
  3. $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
  4. $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
复制代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>自定义模态框</title>
  8.   <style>
  9.     .cover {
  10.       position: fixed;
  11.       left: 0;
  12.       right: 0;
  13.       top: 0;
  14.       bottom: 0;
  15.       background-color: darkgrey;
  16.       z-index: 999;
  17.     }
  18.     .modal {
  19.       width: 600px;
  20.       height: 400px;
  21.       background-color: white;
  22.       position: fixed;
  23.       left: 50%;
  24.       top: 50%;
  25.       margin-left: -300px;
  26.       margin-top: -200px;
  27.       z-index: 1000;
  28.     }
  29.     .hide {
  30.       display: none;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35. <input type="button" value="弹" id="i0">
  36.  
  37. <div class="cover hide"></div>
  38. <div class="modal hide">
  39.   <label for="i1">姓名</label>
  40.   <input id="i1" type="text">
  41.    <label for="i2">爱好</label>
  42.   <input id="i2" type="text">
  43.   <input type="button" id="i3" value="关闭">
  44. </div>
  45. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  46. <script>
  47.   var tButton = $("#i0")[0];
  48.   tButton.onclick=function () {
  49.     var coverEle = $(".cover")[0];
  50.     var modalEle = $(".modal")[0];
  52.     $(coverEle).removeClass("hide");
  53.     $(modalEle).removeClass("hide");
  54.   };
  56.   var cButton = $("#i3")[0];
  57.   cButton.onclick=function () {
  58.     var coverEle = $(".cover")[0];
  59.     var modalEle = $(".modal")[0];
  61.     $(coverEle).addClass("hide");
  62.     $(modalEle).addClass("hide");
  63.   }
  64. </script>
  65. </body>
  66. </html>
  68. jQuery版自定义模态框
自定义模态框(弹出隐藏)
复制代码

属性选择器

复制代码
  1. // 示例
  2. <input type="text">
  3. <input type="password">
  4. <input type="checkbox">
  5. $("input[type='checkbox']");// 取到checkbox类型的input标签
  6. $("input[type!='text']");// 取到类型不是text的input标签
复制代码
复制代码
  1. // 常见的表单筛选
  4. :text
  5. :password
  6. :file
  7. :radio
  8. :checkbox
  1. $("input:checked")

    :submit :reset :button
复制代码

 

posted @   北寒-  阅读(217)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示