jquery的基本知识

最新推荐文章于 2022-04-27 21:37:11 发布

liuchaoqunbwcx

最新推荐文章于 2022-04-27 21:37:11 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/liuchaoqunbwcx/article/details/79146513

版权

1 jquery简介

1-1 感性认识

1-1-1 名称来历

jquery 是“ javascript query ”的缩写，“query”的意思是：查询

``` --？-- * query: 查询 * js的查询：怎么理解？获取html元素的方式，成为查询。 jquery：觉得js查询的方式，太low ,进行了优化，这个就是名字的来历。 * 也是jquery的2大特点之一： a. 优化了获取html元素的方式 b. 浏览器的兼容性。

```

1-1-2 案例演示：图片变大

``` 1.源码 <!DOCTYPE html>

          <!--引入jquery文件-->
          <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

          <script type="text/javascript">
              function fun_js(){
                  // 获取图片的原有宽度
                  var x = document.getElementById("img_id").width;

                  // 设置先有宽度 = 原有宽度+50
                  document.getElementById("img_id").width = x+50;
              }

              function fun_jq(){
                  // 获取图片的原有宽度
                  var x= $("#img_id").prop("width");

                  // 设置先有宽度 = 原有宽度+50
                  $("#img_id").prop("width",x+50);
              }

          </script>

      </head>
      <body>

          <input type="button" onclick="fun_js();"  value="变大—js"/><br>
          <input type="button" onclick="fun_jq();"  value="变大-jquery"/><br>

          <img  id="img_id" src="img/cs.jpg" />
      </body>
  </html>

对jquery的感性认识
- 代码变少
- 获取html元素的方式，使用了一种奇怪的语法，不是documente.getElement。。
- js操作html元素，使用的是：属性; jquery:使用的是：方法。 ```

1-2 基本介绍

``` 1. 定义 * jQuery是一个快速、简洁的JavaScript框架。 * jquery本质，还是js代码。

特点
- 使用“选择器”机制，提供了高效的查询方式。 * 获取html元素的方式，那个奇怪的语法：有个好听的名字：选择器
- 兼容各种浏览器（前端开发工程师的痛点）
- 文档说明很全，应用详细，成熟插件多。
- 核心理念：write less，do more(写的少，做的多)
基本语法：
- "jQuery(选择器)" 或者 "$(选择器)"
jquery的组成
- 选择器 + 方法
  - 对比js，更多使用属性。jquery：使用方法。
jQuery的变量命名
- 推荐以"$"开头，便于区分。（不是强制）
jQuery中的注释和js中一样。
- jquery是对js的封装。 ```

1-3 小结

``` １.小结 * jquery: 就是js代码，对js的封装。 * 优化了获取html元素的方式，解决了浏览器的兼容性。 * 组成：选择器+方法构成。

猜测：jquery学习的内容
- 引入juqery:如何与html代码“勾搭”起来
- 选择器：获取html元素
- 方法：操作html元素，操作html元素的属性，操作内部的子标签，操作文本内容，操作css，操作value值。

```

2 jquery基本使用

2-1 引入jquery

``` 1. 方法 * 在html页面使用

    * 导入js的外联式： jquery:对js的封装，本质上就是js代码，是一个很帅的男人，写的一份js的代码，现在，我们拿过来，直接使用。”

2.感觉 * jquery，就是一个js文件。

jquery版本介绍
- 我们开发选用1.11版本。 ```

2-2 最基本选择器：id选择器

``` * js最基本的获取html元素的方法是： document.getElementById（"id的名称"）：通过id来获取

语法
- ID选择器：$("#id名字")
- 类似css, id选择器，使用“#”
说明
- 先只使用id选择器,因最简单，只获得一个html元素，便于理解。 ```

2-3 常用方法

2-3-1 操作属性值（属性节点）

``` 1. 方法定义

* prop("属性的名称") -- 通过属性的名称，获取元素的某个属性值
* prop("属性的名称", "属性的值") --设置元素的某个属性值

* attr("属性的名称") -- 通过属性的名称，获取元素的某个属性值
* attr("属性的名称", "属性的值") --设置元素的某个属性值

attr和prop的区别 a. 两者关系 * jquery1.6之后，新增的prop方法，代替：attr方法

b. 如何使用 * 工作中，先使用prop(),如果不行，使用attr() ```

2-3-2 操作value值（value属性节点）

``` 1. 方法定义 * val() --获得value属性的属性值 * val("value的值") -- 设置value属性的属性值

提问 --？-- 可以使用prop("value")来代替value方法？
细节
- value方法只能用于：包含“value”属性的表单 ```

2-3-3 操作html内容（子节点－innerHTML）

``` 1. 方法定义 * html() -- 获取html内容 * html("子html内容") -- 设置html内容

细节
- 就是js中的innerHTML属性的“代替品”，是不是“倍感亲切” ```

2-3-4 操作文本(文本节点－－innerText)

``` 1. 方法定义 * text() --获得元素的文本内容 * text("文本内容") -- 设置元素的文本内容

细节
- 就是js中的innerText属性的“代替品”，是不是同样“倍感亲切” ```

2-3-5 操作css方式1

* jquery操作css，比js的能力强。

``` 回顾js:
.style.backgroundColor="red"; // background-color

方式1 a. 方法定义
- css("样式名称") -- 获取指定css样式的值
- css("样式名称","样式的值") -- 设置指定css样式的值
b. 细节－－－类似于js中的style属性 (1) 使用场景 * 适合设置单个的css样式
```
(2) 使用的举例
    * css("background-color","red");
        * 不同于：js，无需使用"backgroundColor"的样式
```

```

2-3-6 操作css方式2

``` 1. 方式2 a. 方法定义 * addClass("类名") --给指定元素添加某个类 * removeClass("类名") --指定元素移除某个类 * hasClass("类名") --判断元素是否包含某个类

b. 细节
    (1) 场景
    * 适合设置多个css样式

    (2) 使用举例
        (A) 先新增一个css类选择器，把需要设置的样式都放入其中
            .aaa{
                background-color:red;
                weight:200px;
                height;200px;
            }

        (B) 使用addClass方法
            $(选择器).addClass("aaa");

```

2-3-7 隐藏与显示(3种效果--知道一个即可：show(),hide())

``` 1. 显示隐藏效果 a. show(speed,callback)，显示 * speed，速度，单位是：毫秒 * callback，表示显示后要进行的操作(回调)，很少 b. hide(speed,callback)，隐藏 c. toggle()，切换开关(“隐藏”的变为“显示”， “显示”的变“隐藏”)

滑动效果 a. slideDown(speed,callback),滑动显示 b. slideUp(speed,callback)，滑动隐藏 c. slideToggle(speed,callback)，滑动进行显示隐藏的切换
淡入淡出 a. fadeIn(speed,callback),淡入 b. fadeOut(speed,callback)，淡出 c. fadeToggle(speed,callback),切换淡入淡出
1. 小结
2. 其实都是：显示和隐藏，只是动画效果不同而已。
3. 只需要记住2个方法：show(),hide()
4. show(),hide(),支持参数：时间参数，可以有动画效果。 ```

2-4 小结（重点）

``` 1. 变与不变 a. 不变的 * 套路：第一步：获取html元素第二步：操作html元素的属性，文本内容，子html元素，css，value值。

b. 变的
    * 获取html元素的方式：jquery:使用选择器
    * 操作html元素的方式：jquery使用方法：prop(),attr(),html(),val(),text（），css().

c. 感受   
    * 把js第一天的知识，换了一种方式，来实现。

```

3 jquery难点知识

3-1 jquery对象和js对象的互相转换

3-1-1 jquery对象与js对象不同(重点)

``` 1. 认识两者的不同 a. 来源不同 * 通过“document.getElementById()”获得对象是：js对象。 document.getElementsByTagName, byClassName, byName: js对象

    * 通过“$(选择器)”获得对象是：jquery对象

b. 使用方式不同
    * js对象，使用属性，进行操作
    * jquery对象，使用方法进行操作（今天学习的所有方法)

c. 如何判断是jquery对象和js对象（重点：体会这种技巧）

    var item =  某种方式获取的html元素，我懵逼了，这个item是js对象，还是jquery对象》

    // 尝试法
    console.log(item.innerHTML);
    console.log(item.html());

```

3-1-2 js对象 --> jquery对象

``` 1. js对象--> jquery对象 a. 语法 * 把js对象(p)转换成jQuery对象： $(p)，特别注意，$(p), 正雀的 $p：是错误的

b. 演示
    // 获得js对象
    var js_item =document.getElementById("h1_id");  

    // 转换成jquery对象(推荐用“$”便于区别,不是强制要求)
    var $jquery_item = $(js_item);

    // jquery对象使用jquery方法
    $jquery_item.css("background-color","red");

```

3-1-3 jquery对象 --> js对象

``` 1. jquery对象-->js对象 a. 语法 * 把jQuery对象(q)转换成js对象：q[0]或者q.get(0)

b. 演示
    -- 准备数据
    <h1 id="h1_id">我是中国人</h1>


    --js代码
        // 获得jquery对象
        var $jquery_item =  $("#h1_id");

        // 转换成js对象(方式1)
        var js_item1=$jquery_item[0];

        alert(js_item1.innerText); //使用js方法

        // 转换成js对象(方式2)
        var js_item2=$jquery_item.get(0);
        alert(js_item2.innerText); // 使用js方法

```

3-1-4 “我是谁”

``` * 增加一个： * 思维的盲点： * js对象和jquery对象，都是指向的html元素。 * 因为，获取的html元素的方式不同，人为的分为：js对象和jquery对象。

再次强调--如何判断是jquery对象和js对象的方法
- 感知（尝试）法 console.log(item.html()); console.log(item.innerHTML); ```

3-2 jquery的加载顺序

``` 1. 定义 * 和js一样，jquery也存在加载顺序问题。 * jquery自己封装了一个document的ready事件，即“页面加载完成时”触发该方法。 * js里面是：window.onload事件

语法
- $(document).ready(当页面加载完成时要执行的函数) --->window.οnlοad=function(){};
- $(document).ready(function(){}) --> 偷懒的写法：$(function(){});
特点
- $(document).ready(当页面加载完成时要执行的函数)，其作用类似于：js中window的onload事件
- 两者对比来看，ready事件执行时机比onload事件早，并且可以多次执行。
澄清一个误区
- js和jquery，其实是一个东西。jquery是用js编写的一个库。所以，在代码中，js代码和jquery代码，可以混用。
- 区别：通过选择器获取的html元素，是jquery对象；通过document.getElement...获取的html元素，是js对象。

```

3-3 jquery事件

3-2-0 示范代码

``` // 事件注册的源码 $(function(){ $("#bt4").click(function(){

                var old = $("#img_id").prop("width");

                $("#img_id").prop("width",old-100);
            });
        });

```

3-2-1 2种事件绑定的方式：方式1

``` 方式1：bind方法语法： * jquery对象.bind(事件类型，匿名函数),通过bind方法可以绑定各种事件举例：

    * $("#bt1").bind("click",function(){
          alert("点击了按钮");
    });

```

3-2-2 2种事件绑定的方式：方式2

``` 1. 方式2：直接使用对应的事件方法语法： * jquery对象.事件方法(匿名函数) 举例： * $("#bt1").click(function(){ alert("点击了按钮"); });

```

3-2-3 完整版的事件注册代码

3-2-4 常见事件名称

细节： * bind方法中，事件类型，就是下列事件方法的字符串形式。 * 这些事件，js统统都有，只是前面多了"on", onclick(js的用法) --->click(jquery的用法)

| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件(了解) | | ---------------- | -------- | ----------- | --------------- | | click(单击) | keypress | submit | load | | dblclick(双击) | keydown | change | resize | | mouseenter(鼠标移入) | keyup | focus（获得焦点） | scroll | | mouseleave(鼠标移出) | | blur（失去焦点） | unload |

更多事件

Logo

3-2-5 扩展:事件携带的参数

``` 1. 获取事件发生时的系统参数(jquery给我准备好了，提供event参数) event参数的数据：是系统给我们做好的。 $("#bt1").click(function(event) { alert(event.pageX); } );

使用this关键字 $("#bt1").click(function(event) { alert(this.id); alert($(this).prop("id")); } );

```

附提供的系统数据

| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 | | -------------------------- | ---------------------------------------- | | event.pageX | 相对于文档左边缘的鼠标位置。 | | event.pageY | 相对于文档上边缘的鼠标位置。 | | event.preventDefault() | 阻止事件的默认动作。 | | event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 | | event.target | 触发该事件的DOM 元素(js对象，非jquery对象) | | event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 | | event.type | 描述事件的类型。 | | event.which | 指示按了哪个键或按钮。【不是每个都支持】 |

3-2-6 事件的2个专有名词(了解：开拓见识)

``` * 学习的目的：听过这2个专用名词，知道是什么意思，但是，不用管代码。

a. 阻止浏览器（事件）的默认动作:event.preventDefault() * 看演示

b. 阻止事件的传播（事件的冒泡）： * 看演示

```

4 2个基本选择器（重点）

4-1 基本使用

``` 1. 语法 * $(".类名"): 类选择器 * $("标签名")：标签选择器 $("h1")

* 加上前面的id选择器，是不是和css的一样。

基本使用
- 类选择器和标签选择器，想到：获取的是多个html元素，怎么办？使用数组即可。
  - jquery不是这么玩的，不使用数组。
小结 ```

4-2 遍历多个html元素--each的特别用法

```

获得元素的个数，使用的是：属性length a. 使用演示 * $("h1").length
each方法--jquery方法 a. 语法 * $(selector).each(function(index,element)) // 留心这里，element是js对象，表示元素的索引（次序）

b. 使用 --准备数据

aaa1

aaa2

aaa3
```
$("h1").each(function(index, element){
    alert(index);
    alert(element.innerText);  
});
```
each搭配this使用 $("h1").each(function(index){ alert(index); alert(this.innerText); // 留心这里：this是js对象 });
小结
- each方法搭配this使用，this表示：正在遍历的那个html元素，他是一个js对象。 ```

5 高级选择器（了解）

5-1 层级选择器

``` 1. 定义： A B：也是选择器 * $("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签.(后代选择器) * $("A>B"):获取A元素下面的所有B子元素。（直接后代选择器） * $("A+B"):获取A元素同级的一个B元素。（兄弟选择器，只选择了一个兄弟） * $("A~B"):获取A元素同级的所有B元素。（兄弟选择器，所有的兄弟）

理解层次，类似家谱，不同的层级，有两种关系:后代关系（包括父子关系），兄弟关系
小结使用最多的是：后代选择器 $("A B")

```

5-2 过滤选择器

``` 1. 定义 * $("选择器:first"):找到所有符合该选择器的第一个元素。 * $("选择器:last"):找到所有符合该选择器的最后一个元素。 * $("A选择器:not(B选择器)":找到符合A选择器，并且不符合B选择器所有元素 * $("选择器:even"),找到所有符合该选择器的下标为偶数的元素。(从0开始计数) * $("选择器:odd"),找到所有符合该选择器的下标为奇数的元素。 * $("选择器:eq(index)"),找到符合该选择器的第index个元素。（index从0开始计算）（等于） * $("选择器:gt(index)"),找到符合该选择器的并且下标大于index的所有元素。（大于） * $("选择器:lt(index)"),找到符合该选择器的并且下标小于index的所有元素。（小于）

* $(":header"),找到所有标题元素。（h1~~h6）
*  $(":empty"),找到所有空元素（不包含子元素和文本的元素）    
        * <img />:空元素  <input />

理解
- 过滤二字，先“初选”，然后再“过滤”一次。 ```

5-3 属性选择器

``` 1. 定义 * [属性名]：获取有属性名的元素 * [属性名=属性值]：获取属性名 = 属性值的元素 * [属性名 != 属性值]：获取属性名 != 属性值的元素 * [...][...][...]复合属性选择器，多个属性同时过滤。where..and..and..

---- 
* [属性名^=值]：获得 属性名对应的属性值"以值开头"的所有元素
* [属性名$=值]：获得 属性名对应的属性值"以值结尾"的所有元素
* [属性名*=值]：获得 属性名对应的属性值"含有值"的所有元素

2，理解

```

5-4 表单属性选择器

``` 1.定义 * :enabled 可用的 * :disabled 不可用的，例如： * :checked 选中的，例如：单选框,多选框,也包括下拉列表 * :selected 选择的，例如：下拉列表 <option selected="selected”>

理解
- $(":checked").length： jquery对象可以通过length属性，获取其包含的html元素的数量。 ```

6 实战案例

6-1 隔行换色案例

~

6-2 全选和反选的案例

~

6-3 轮播和弹出广告

1. 需求 * 页面加载完毕后，3秒之内出现广告，使用滑动效果，2秒显示完毕。完整显示4秒之后，隐藏广告。