jQuery学习

标签：jQuery hide DOM 对象 学习 div css

1.概述

    把原生动画封装到jquery库中

    官网地址：https:/jquery.com/

1.1JavaScript库

        JavaScript库：即library,是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show,比如获取元素等。

1.2引入函数

<script>
    //等待页面加载完毕再加载
    $(document).ready(function(){
        $('div').hide();
    })
    //方法二
    $(function(){
        $('div').hide();
    })
</script>

2.区别

2.1顶级对象$

    $代表jQuery，是jQuery的顶级对象

2.2与DOM对象区别

    $('div');//获取jQuery对象，以伪数组存储，不能使用DOM对象中的属性

2.3与DOM对象相互转换

    var box = document.querySelector('.box');

    转换成jQuery

    $(box);

    转换成DOM对象

    $('video')[0];或者

    $('video').get(0);

3.常用操作

3.1基础选择器

 

3.2层级选择器

 

3.3隐式迭代

<script>
    //隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
    $("div").css("background","pink");
</script>

3.4筛选选择器

 

3.5筛选方法（重要）

 

3.6链式编程

<script>
    $("#content div").eq(index).show().siblings().hide();
    //将自己兄弟隐藏
</script>

3.7样式操作

<script>
//方式一
    $("div").css("width","300px");
//方式二
    $("div").css("width",300);
//方式三
    $("div").css({
        width:300,
        height:400,
        color:"red"
    });
//添加类
    $("div").addClass("current");
//删除类
    $("div").removeClass("current");
//切换类
    $("div").toggleClass("current");
</script>

标签：jQuery,hide,DOM,对象,学习,div,css
From： https://www.cnblogs.com/kkltol/p/17067839.html