day 2-17

最新推荐文章于 2022-06-29 14:00:00 发布

无语凝噎O(n^n)

最新推荐文章于 2022-06-29 14:00:00 发布

阅读量198

点赞数

分类专栏：日记

本文链接：https://blog.csdn.net/qq_41261213/article/details/113837931

版权

jQuery DOM操作动画效果选择器事件处理

关键词由CSDN通过智能技术生成

日记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery的概念

jQuery 是一个快速、简洁的 JavaScript 库，倡导写更少的代码，做更多的事情。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质：学习调用这些函数（方法）。
jQuery 的目的是加快前端人员的开发速度，可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种
$(function () {   
    ...  // 页面 DOM 加载完成的入口
}) ; 

// 第二种
$(document).ready(function(){
   ...  //  页面DOM加载完成的入口
});

总结：

DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

jQuery 对象才能使用 jQuery 方法
DOM 对象是使用原生的 JavaScirpt 方法。

jQuery 对象和 DOM 对象转换

// DOM对象转换成jQuery对象
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// jQuery 对象转换为 DOM 对象
//  1.jQuery对象[索引值]
var domObject1 = $('div')[0]

//  2.jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

总结：常用的是把DOM对象转换为jQuery对象

jQuery 选择器

1. 基础选择器

2. 层级选择器

层级选择器最常用的：后代选择器和子代选择器。
在这里插入图片描述

3. 筛选选择器

在所有的选项中选择满足条件的进行筛选选择。常见如下 :

jQuery中还有一些筛选方法，相当于DOM中的通过一个节点找另外一个节点。

jQuery 样式操作

常用的样式操作有两种：

1.css
2.设置类样式方法

1: 操作 css

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

用于样式较少时

2. 设置类样式方法

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

适合样式多时使用
js 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作是对指定类进行操作，不影响原先的类名。

jQuery 效果

jQuery 封装最常见的动画效果：

显示隐藏：show() / hide() / toggle() ;
划入划出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定义动画：animate() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

1. 显示隐藏

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下不加参数直接显示隐藏
        });
    </script>
</body>

2. 划入划出

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

3. 淡入淡出

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

4. 自定义动画

<body>
    <button>内容</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

5. 停止动画排队

stop() 方法用于停止动画或效果,写在动画或者效果的前面，相当于停止结束上一次的动画。
总结: 每次使用动画前先调用 stop() ,在调用动画。

6. 事件切换

jQuery提供了新事件 hover() ，功能类似 css 中的伪类 :hover
语法

hover([over,]out)     // 其中over和out为两个函数

over = mouseenter

鼠标移到元素上要触发的函数

out = mouseleave

鼠标移出元素要触发的函数

只有一个函数时，鼠标经过和离开都会触发

jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

元素固有属性值 prop()

元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

语法
1.获取属性语法

prop(“属性”)

2.设置属性语法

prop(“属性”,“属性值”)

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

语法
1.获取属性语法

attr(“属性”)

2.设置属性语法

attr(“属性”,“属性值”)

注意：attr() 除了普通属性操作，更适合操作自定义属性。（也可以获取 H5 自定义属性）

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

语法
1.附加数据语法

data(“name”,“value”)

2.获取数据语法

data(“name”)

注意：可以读取 H5 自定义属性 data-index ，得到的是数字型。

jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

语法

设置 / 获取

1.普通元素内容html()==innerHTML

html(“内容”) / html()

2.普通元素文本内容text()==innerText

text(“内容”) / text()

3.表单值val()==value

val(“内容”) / val()

注意：html() 可识别标签，text() 不识别标签。

jQuery 元素操作

标签的遍历、创建、添加、删除等操作。

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

$(“div”).each(function(index,domEle) { xxx; })

each()方法遍历匹配的每个元素
index：每个元素索引
domEle：每个DOM元素对象，不是jQuery对象
使用jQuery方法需要给这个DOM元素转换为jQuery对象$(domEle)

语法2

$.each(object,function(index,element) { xxx; })

each()方法遍历匹配的每个元素主要用于数据处理比如数组，对象
index：每个元素索引
element：遍历的内容

创建、添加、删除

1.创建

$("<span.> </span.>")
动态创建一个span标签

2.添加

内部添加
将内容放入匹配元素最前面/后面

element.append(“内容”)
element.prepend(“内容”)

生成后是父子关系

外部添加
将内容放入目标元素前面/后面

element.after(“内容”)
element.before(“内容”)
生成后是兄弟关系

3.删除

删除元素本身

element.remove()

删除匹配元素集合中所有的子节点

element.empty()

清空匹配的元素内容,html内可以设置内容

element.html("")

jQuery 尺寸、位置操作

jQuery 尺寸操作


取得匹配元素宽度和高度值只算width / height
width()/height()

取得匹配元素宽度和高度值包含padding
innerWidth()/innerHeight()

取得匹配元素宽度和高度值包含padding、border
outerWidth()/outerHeight()

取得匹配元素宽度和高度值包含padding、borde. margin
outerWidth(true)/outerHeight(true)