jquery获取style display属性

转载

mob64ca1411a6fc 2024-09-09 15:23:38

文章标签 jquery jQuery ide 属性值 文章分类 jQuery 前端开发

jQuery 介绍

JavaScript 库
jQuery的优点
jQuery 的下载
jQuery的入口函数
DOM对象与JQuery对象
jQuery 对象和 DOM 对象转换
JQuery中的一些方法
属性操作
jQuery 文本属性值
jQuery 元素操作
jQuery 尺寸、位置操作

JavaScript 库

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

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

jQuery的优点

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

jQuery 的下载

版本介绍：

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>

2、jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()

jquery获取style display属性_jQuery