学习笔记①（jQuery概述与使用）

jQuery

网课——jQuery Pink老师

1、 概述

1.1 常见JS库

• jQuery
• Prototype
• YUI
• DOjo
• Ext JS
• 移动端的zepto

2、 使用

2.1 JS入口函数

• 等着页面DOM加载完毕再去执行js代码
• 相当于原生JS中的DOMContentLoaded
• 不同于原生JS中的load

2.1.1

<div></div>

<script>
    $(document).ready(function(){
        $('div').hide()
    })
</script>

2.1.2

<script>
     $(function(){
         $('div').hide();
     })
</script>

2.2 jQuery的顶级对象

• $ 是jQuery的别称，可使用$代替jQuery,一般使用 $

<script>
    $(function(){
        $('div').hide();
    })
    //等价于
    jQuery(function(){
        jQuery('div').hide();
    })
</script>

• $同时也是jQuery的顶级对象,相当于原生js中的window

2.3 jQuery对象

• DOM对象：利用原生js获取的对象
• jQuery对象：利用jQuery方式获取过来的对象（ps:本质用$对DOM对象进行包装产生的对象，使用伪数组形式进行存储）
• jQuery对象只能使用jQuery方法和属性，DOM对象只能使用DOM方法和属性

//DOM方法
var div = document.querySelector('div');
div.style.display = 'none';

//jQuery方法
$('div').hide();

• DOM对象和jQuery对象可相互转换（范围：原生js > jQuery）

	<video src="mov.mp4"></video>
    <script>
        // 1.DOM对象转换为jQuery对象
        // (1)直接获取jQuery对象
        $('video');
        // (2)已经使用原生js获取，使用 $(DOM对象) 进行转换
        var myvideo = document.querySelector('video');
        $(myvideo);
        
		// play是原生js里的函数，故myvideo.play()有效，$('video').play()会报错
        // 2.jQuery对象转换为DOM对象
        // (1) $('video')[index] index是索引号
        $('video')[0].play();
        // (2) $('video').get(index) index是索引号
        $('video').get(0).play();
    </script>

2.4 jQuery常用API

2.4.1 jQuery选择器

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

• ID选择器
• 全选选择器 $("*")
• 类选择器
• 标签选择器
• 并集选择器 $(“div,p,li”)
• 交集选择器 $(“div.box1”)

2.4.1.2 jQuery 层级选择器

• 子代选择器 $(“ul>li”);
• 后代选择器 $(“ul li”);

2.4.1.3 选择器的应用 —— 隐式迭代

• 把匹配的所有元素内部进行遍历循环
• jQuery 设置样式
  $(‘div’).css(‘属性’，‘值’)；
  $(“div”).css(“background”,“pink”)

2.4.1.4 筛选选择器

2.4.1.5 jQuery筛选方法

2.4.1.6 jQuery排他思想