JQuery学习1

1.js库；

Library 是一个封装好的特定集合。

2.jQuery：快速简洁的js库；快速查找使用里面的功能；

优点：轻量级；跨浏览器，对事件，样式，动画支持，支持插件扩展开发；

基本使用：1x:兼容低版本浏览器；官网不在更新；

2x:不兼容；

3X:不兼容

jQuery的使用：1.文件引入；

2.入口函数：等页面加载完后再执行js代码；不必等外部资源；

 // 等页面加载完后再执行js代码；
        $(document).ready(function() {
            $('div').hide();
        })
        // 隐藏元素
        $(function() {
            $('div').hide();
        })

相当于原生代码中的domcontentloaded.不同于load事件，js文件，css文件，图片加载完毕才执行

$是jQuery别称也为jquery的顶级对象；相当于js中的window；

3.原生获取的对象就为dom对象；

  // 1.dom对象：用原生js获取的对象
        let myDiv = document.querySelector('div');
        console.log(myDiv);
        // 2.jquery对象：用jquery方式获取过来的对象是jQuery对象。本质：通过$把dom元素进行封装
        $('div'); //是jquery对象
        console.dir($('div'));
        // 3.jQuery 对象只能使用jQuery方法，dom对象则使用原生的js属性和方法
        myDiv.style.display = 'none';
        $('div').hide(); //不可使用原生方法

特殊情况相互转换：

1.dom转换为jQuery对象：

jquery转换为dom：

		 //1.dom对象转换为急缺对象
		        // （1）直接获取视屏
		        $('video');
		        // 已经使用原生js 获取视屏
		        let myvideo = document.querySelector('video');
		        $(myvideo);
		        // jquery里没有play方法
		        // 2.jquery转换为dom对象
		        // myvideo.play();
		        $('video')[0].play()
		        $('video').get(0).play()  自动播放

二：jquery常用api

1.jquery选择器：

获取dom元素：

常用：

  <script>

        $(function() {

            console.log($(".nav"));

        })

    </script>

  console.log($("ul li"));

jquery设置属性：

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

 

 // 1.获取四个div元素
        console.log($("div"));
        // 2.给四个div设置背景颜色为粉色 jquery不可使用style
        $("div").css("background", "pink");
        // 隐式迭代把元素内部进行遍历循环，给每一个元素添加css方法
        $("ul li").css("color", "red");

 

1.4jquery筛选选择器：

$("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "red");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })

jquery选择器：

1.5jQuery筛选方法（重点）

$(function() {
            // 1.兄弟元素 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2.第n元素
            var index = 2;
            // （1）我们可以利用选择器的方式选择
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2)我们可以利用选择方法的方式选择
            // $("ul li").eq(2).css("color", "blue");
            $("ul li").eq(index).css("color", "blue");
            // 3.判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));
        });