对JQuery中的一些方法和属性·整理（一）

最新推荐文章于 2022-09-30 15:18:10 发布

你们看不见我丶

最新推荐文章于 2022-09-30 15:18:10 发布

阅读量202

点赞数 4

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43476293/article/details/106816710

版权

jQuery 介绍

JavaScript 库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

jQuery的优点

1、轻量级。核心文件才几十kb，不会影响页面加载速度。
2、跨浏览器兼容，基本兼容了现在主流的浏览器。
3、链式编程、隐式迭代。
链式编程：为了节省代码量。
隐式迭代：遍历内部DOM元素的过程。
4、对事件、样式、动画支持，大大简化了DOM操作。
5、支持插件扩展开发。

jQuery 的下载

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

版本介绍：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

jQuery的入口函数

// 第一种: 简单易用。
$(function () {
// 此处是页面 DOM 加载完成的入口
}) ;

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
// 此处是页面DOM加载完成的入口
});

DOM对象与JQuery对象

DOM对象：用原生js获取过来的对象就是DOM对象。

JQuery对象：用JQuery方式获取过来的对象就是JQuery对象。本质就是通过$把DOM元素进行了包装。同时jquery方法和js原生的方法不能混用。
顶级对象 $ = jQuery
$(function(){}) = jQuery(function(){})

jQuery 对象和 DOM 对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById(‘box’); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
// 2.1 jQuery对象[索引值]
var domObject1 = $(‘div’)[0]

// 2.2 jQuery对象.get(索引值)
var domObject2 = $(‘div’)[0]

JQuery中的一些方法

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

// 1.添加类
$(“div”).addClass(“类名”);

// 2.删除类
$(“div”).removeClass(“类名”);

// 3.切换类 如果有就删除，如果没有就添加
$(“div”).toggleClass(“类名”);

获取元素的常见方法

$("div").parent();获取父元素

$("div").children();获取子元素

$("div").find();获取当前元素的后代元素

$("div").siblings();获取除当前元素的其他兄弟元素

$("div").eq();获取指定索引的元素

动画方法
1、显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

<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、滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

<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、淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

<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、自定义动画 animate
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;

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

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

属性操作

jQuery 常用属性操作有三种：prop() / attr() / data()
1、元素固有属性值 prop() 更适合操作表单属性
2、元素自定义属性值 attr()
3、数据缓存 data()

prop()函数的结果:
1.如果写有相应的属性，返回指定属性值。
2.如果没有写相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果写有相应的属性，返回指定属性值。
2.如果没有写相应的属性，返回值是undefined。

对于HTML元素的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的属性，在处理时，使用attr方法。
具有 true 和 false 两个属性值的属性，如 checked, selected 或者 disabled 使用prop()

jQuery 文本属性值

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

jQuery 元素操作

1、遍历元素
我们在jQuery中可以使用each（）方法来遍历同一类元素或者对象。

//1、如果遍历jquery对象，使用
$('div').each( function(){} )
//2、如果遍历普通对象，使用
$.each(obj,function(){})

2、创建元素

//在jQuery中我们创建元素只需要在$('')中放入完整的标签就可以了
$('<div></div>')

3、添加元素

内部添加：添加的元素将成为该元素的子节点
append('内容')//把内容添加到该元素内部的末尾位置
prepend('内容')//把内容添加到该元素内部的开头位置
外部添加：添加的元素将成为该元素的兄弟节点
after('内容')//把内容添加到该元素后面
before('内容')//把内容添加到该元素前面

4、删除元素

remove()//删除元素本身
empty()//删除该元素下的所有子节点
html("")//清空该元素的内容

jQuery 尺寸、位置操作

1、jQuery 尺寸操作

<div></div>
<script>
    $(function() {
    // 1. width() / height() 获取设置元素 width和height大小 
    console.log($("div").width());
    // $("div").width(300);

    // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
    console.log($("div").innerWidth());

    // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
    console.log($("div").outerWidth());

    // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
    console.log($("div").outerWidth(true));
})
</script>