jQuery

    $(function () {
        /* 等页面加载完毕后执行内部代码 */
        console.log("#box");
    })
    $(document).ready(function () {
        console.log("#box");
    })

顶级对象

$是jquery的别称

$是jquery的顶级对象，相当于原生js中的window，把元素利用$包装成jquery对象就可以调用方法

jquery对象和dom对象

用原生js获取过来的对象是dom对象
jquer获取过来的是jquery对象
jquery对象利用$对dom对象包装后产生的对象（伪数组的形式存储）
jjquery对象只能使用jquery的方法dom对象使用原生js的方法

相互转换

  console.log($('#box'));
    var box = document.getElementById('#box')
    // dom转jquery对象
    $(box)
    // jQuery对象转dom对象
    $('#box')[0]
    $('#box').get(0)

jQuery 选择器

1 jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

$( “ 选择器 ” ) // 里面选择器直接写 CSS 选择器即可，但是要加引号

2 隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做 隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

$('div').css('属性', '值')

3.jQuery 筛选选择器

4 Query 筛选方法（重点）

jQuery 里面的排他思想

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
<script>
    $(function () {
        // 隐式迭代
        $('button').click(function () {
            // 当前元素添加颜色
            $(this).css('background', 'pink')
            // 隐式迭代获取其余兄弟元素去掉颜色
            $(this).siblings('button').css('background', '')
        })
    })
</script>

链式编程

$(this).css('color', 'red').sibling().css('color', '');

jQuery 样式操作

操作 css 方法

1. 参数只写属性名，则是返回属性值

$(this).css(''color'');

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'')

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，

$(this).css({ "color":"white","font-size":"20px"});

设置类样式方法

1. 添加类

$(“div”).addClass(''current'')

2. 移除类

$(“div”).removeClass(''current'');

3. 切换类

$(“div”).toggleClass(''current'')

类操作与className区别

原生 JS 中 className 会覆盖元素原先里面的类名。

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

<style>
    .one {
        width: 350px;
        height: 350px;
        background-color: green;
        border-radius: 50%;
    }

    .font {
        font-size: 50px;
        line-height: 350px;
        text-align: center;
    }
</style>

<body>
    <div id="box" class="one">11111</div>
</body>
<script>
    // let box = document.getElementById('box')
    // 覆盖类名
    // box.className = 'font'

    $('#box').addClass('font') //追加类名不影响有的

jQuery 效果

显示隐藏效果

show([speed,[easing],[fn]])

hide([speed,[easing],[fn]])

toggle([speed,[easing],[fn]])

参数都可以省略，无动画直接显示。
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

 div {
        width: 150px;
        height: 35

最低0.47元/天解锁文章

200万优质内容无限畅学