jQuery基础自学笔记DAY1

jQuery基础自学笔记DAY1

• 入口函数
• 选择器

---

一、jQuery入口函数

   //第1种方法 等页面加载完毕在执行js代码
     $(document).ready(function () {
        $('div').hide();
     })
    // 第2种方法 等页面加载完毕在执行js代码
     $(function () {
        $('div').hide();
     })

    // $ === jQuery 顶级对象
    // jQuery(function () {
    //     alert(11)
    // })

二、jQuery对象和DOM对象

2.1 DOM对象：原生js获取过来的对象就是DOM对象

代码如下（示例）：

	var myDiv = document.querySelector('div');
	var mySpan = document.querySelector('span');
	console.dir(myDiv);

2.2 jQuery对象：用jQuery方式获取过来的对象就jQuery对象。

代码如下（示例）：
本质：通过$把DOM元素进行了包装，包装后产生的对象（伪数组的形式存储）

	$('div');//$('div');是一个jQuery对象
	$('span');
 	console.dir($('div'));

2.3 jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

代码如下（示例）：

div.style.display = 'none';
	// $('div');.style.display = 'none';  错误的
	// myDiv.hide(); 错误的

---

2.4 jQuery对象和DOM对象相互转换

2.4.1 DOM对象转换为jQuery对象：$(DOM对象)

	// (1)我们直接获取视频，得到就是jQuery对象
		$('video');
	// (2)我们已经使用原生js获取过来的DOM对象
		var myvideo = document.querySelector('video');
	// $(myvideo).play();//jQuery 里面没有play这个方法

2.4.2 jQuery对象转换为DOM对象

	// myvideo.play();
		$('video')[0].play();
		$('video').get(0).play();

三、jQuery 选择器

3.1 jQuery 类选择器

选择器	例子	解释
ID选择器	$(‘#id’)	获取指定ID的元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(‘.class’)	获取同一类class的元素
标签选择器	$(‘div’)	获取统一类标签的所有元素
并集选择器	$(‘div,p,li’)	选择多个元素
交集选择器	$(‘li.current’)	交集元素

3.2 jQuery 层级选择器

选择器	例子	解释
子代选择器	$(‘ul>li’)	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
父代选择器	$(‘ul li’)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

	$(function () {
		console.log($('.nav'));;
		console.log($('ol li'));
		console.log($('ul>li'));
	})

jQuery 隐式迭代 就是把匹配的所有元素内部进行遍历循环。

3.3 jQuery 筛选选择器1

选择器	例子	解释
:first	$(‘li:first’)	获取第一个li的元素
:last	$(‘li:last’)	获取最后一个li的元素
:eq(index)	$(‘li:eq(2)’)	获取li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(‘li:odd’)	获取到li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到li元素中，选择索引号为偶数的元素

	$('ul li:first').css('color', 'green');
	$('ul li:eq(2)').css('color', 'pink');
	$('ul li:odd').css('color', 'blue');

3.4 jQuery筛选方法2（重点）

选择器	例子	解释
parent()	$(‘li’).parent()	查找父级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’)
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)
siblings(selector)	$(‘.first’).siblings(‘li’)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(‘.first’).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(‘.last’).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(‘li’).eq(e)	相当于$(‘li:eq(2)’),index从0开始

	// 1.父 parent()	返回最近一级的父级元素
		console.log($('.son').parent());
	// 2.子
		console.log($('.nav').children('p'));// 亲儿子
		console.log($('.nav').find('p'));// 所有的孩子包括儿子和孙子
	// 3.兄
	// siblings(selector)	$('.first').siblings('li')  查找兄弟节点，不包括自己本身
		$('ol .item').siblings('li').css('color', 'blue');
	// nextAll([expr])      $('.first').nextAll()       查找当前元素之后所有的同辈元素
		$('ul .item').nextAll().css('color', 'red');
	// prevAll([expr])      $('.last').prevAll()       查找当前元素之前所有的同辈元素
		$('ul .item').prevAll().css('color', 'pink');
		// eq(index)            $('li').eq(e)               相当于$('li:eq(2)'),index从0开始
		 $('ul>li').eq(2).css('color', 'green');
		// $('ul>li:eq(2)').css('color', 'green');//选择器方式
		// hasClass(class)      $('div').hasClass('protected') 检查当前的元素是否含有某个特定的类，如果有，则返回true
		console.log($('div:first').hasClass('current'));
		console.log($('div').eq(1).hasClass('current'));

3.5 排他思想

让中间索引对应的li显示,其他的li隐藏。
链式编程。

		$('#center>li').eq(index).show().siblings('li').hide();