jQuery笔记

豪ㄘ

已于 2024-06-04 18:50:27 修改

阅读量416

点赞数 10

文章标签： jquery

于 2024-02-28 11:20:20 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79880794/article/details/136341339

版权

1.为什么要学jQuery？

使用javascript开发过程中，有许多的缺点：

查找元素的方法单一，麻烦。
遍历数组很麻烦，通常要嵌套一大堆的for循环。
有兼容性问题。
想要实现简单的动画效果，也很麻烦
代码冗余

1.1 体验jquery的使用

1.2 什么是jquery？

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用时直接引用js文件就可以了

2.jquery的入口函数

2.1 使用jQuery的三个步骤

引用jQuery文件
入口函数
功能实现

2.2.关于jQuery的入口函数

2.3 jQuery入口函数与js入口函数的对比：

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载

3 jq对象和dom对象(重要）

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
DOM对象与jQuery对象的方法不能混用。

3.1 DOM对象转换成jQuery对象：

3.2 jQuery对象转换成DOM对象：

4.jQuery选择器

4.1 什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。

4.2 基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

4.2 层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

4.3 过滤选择器

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

4.4 筛选选择器(方法)

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

5.元素设置

5.1 样式设置

5.2 类名设置

5.3 属性设置

5.4 prop方法

6.动画

6.1 基本动画

6.2 滑入滑出

6.3 淡入淡出

6.4 自定义动画

7.节点操作

7.1 创建节点

7.2 克隆节点

7.3 添加&移动节点

7.4 删除节点&清空节点

8.jQuery特殊属性操作

8.1 val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

8.2 html方法与text方法

html方法相当于innerHTML text方法相当于innerText

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

8.3 width方法与height方法

设置或者获取高度

获取网页的可视区宽高：

8.4 scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

8.5 offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

9.jQuery事件

9.1 简单事件注册

缺点：不能同时注册多个事件

9.2 bind方式注册事件

缺点：不支持动态事件绑定

9.3 delegate注册委托事件

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

9.5 on注册事件 (重点)

9.5.1 on注册简单事件

9.5.2 on注册委托事件

9.5.3 on注册事件的语法：

9.6 事件解绑

9.6.1 unbind方式（不用）

9.6.2 undelegate方式（不用）

9.6.3 off方式（推荐）

9.7 触发事件

9.8 jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

10 工具方法

11 示例代码

案例-《美女相册》

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: "Helvetica","Arial",serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="images/meinv/1.jpg" title="美女A">
        <img src="images/meinv/1-small.jpg" width="100" alt="美女1" />
    </a></li>
    <li><a href="images/meinv/2.jpg" title="美女B">
        <img src="images/meinv/2-small.jpg" width="100" alt="美女2" />
    </a></li>
    <li><a href="images/meinv/3.jpg" title="美女C">
        <img src="images/meinv/3-small.jpg" width="100" alt="美女3" />
    </a></li>
    <li><a href="images/meinv/4.jpg" title="美女D">
        <img src="images/meinv/4-small.jpg" width="100" alt="美女4" />
    </a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/meinv/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
      //1.需求
      //给小图片a标签设置一个单击事件.
      //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
      //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

      $('#imagegallery>li>a').click(function () {
          //获取当前点击的a标签的href属性的值和title属性的值。
          var srcValue = $(this).attr('href');
          var contentValue = $(this).attr('title');
          //给img标签的src属性赋值，以及给p标签的内容赋值。
          $('#image').attr('src',srcValue);
          $('#des').text(contentValue);
          //阻止a标签的跳转
          return false;
      });


  });
</script>
</body>
</html>