jQuery 常用知识

入口函数

详细代码

1. jQuery入口函数：

	<script>
		//第一种写法
    	$(document).ready(function(){
			console.log('入口函数');
		});
        
		//第二种写法
		$(function(){
			console.log('入口函数');
		});
	</script>

2. 原生 js入口函数：

	<script>
		window.onload = function(){
            console.log('入口函数');
        };
	</script>

区别：
jQuery的入口函数可以写多个；window.onload不能写多个。
jQuery的入口函数优先于原生js的入口函数执行。

基本选择器

名称	用法	描述
id选择器	$(’#id’)	获取指定id的元素
类选择器	$(".类名")	获取同一class的元素
标签选择器	$(“标签名”)	获取同一标签的所有元素
并集选择器	$(’.box,.box2’)	获取符合条件之一的元素
交集选择器	$(‘li.red’)	获取类名为red的li元素

过滤选择器

名称	用法	描述
:eq(索引)	$(‘li:eq(2)’).css(‘color’,‘red’);	获取到的li元素中，选择索引号（从0开始）为2的元素
:odd	$(‘li:odd’).css(‘color’,‘pink’);	获取到的li元素中，选择索引号（从0开始）为奇数的元素
:even	$(‘li:even’).css(‘color’,‘blue’);	获取到的li元素中，选择索引号（从0开始）为偶数的元素

筛选选择器

名称	用法	描述
children(选择器)	$(‘ul’).children(‘li’)	相当于$('ul>li')子类选择器
find(选择器)	$(‘ul’).find(‘li’)	相当于$('ul li')后代选择器
siblings(选择器)	$(’#first’).siblings(‘li’)	查找兄弟节点，不包括自身
parent()	$(’#first’).parent()	查找父亲
eq(索引)	$(‘li’).eq(3)	相当于$('li:eq(3)')
next()	$(‘li’).next()	查找下一个兄弟
prev()	$(‘li’).prev();	查找上一个兄弟

DOM对象 ↔ jQuery对象

详细代码、Demo

1. DOM对象 → jQuery对象

var div1 = document.getElementById('div1'); //dom对象

var $div1 = $(div1); // jQuery对象

2. jQuery对象 → DOM对象

var $div1 = $('#div1'); //此为 jQuery对象

//方法一：利用下标
var div1 = $div1[0]; //此为 dom对象

//方法二：使用jQuery对象的get()方法：
var div1 = $div1.get(0); //此为 dom对象

jQuery 方法

1. 获取/设置文本内容：text()

详细代码

不给参数就是获取；给参数就是设置。

语法：

text() //获取
text('...') //设置

2. 获取/设置样式：css()

详细代码
语法：

css() //获取
css('样式名':'样式值') //设置单样式
css({'样式名1':'样式值1','样式名2':'样式值2'}) //设置多样式

3. class操作

详细代码
语法：

名称	用法	描述
添加类	.addClass(‘类名’)	为元素添加类名
移除类	.removeClass(‘类名’)	为元素移除类名
判断类	.hasClass(‘类名’)	判断元素是否有某个类名
切换类	.toggleClass(‘类名’)	如果元素有某个类名就删除；如果元素没有某个类名就添加

4. 显示/隐藏

详细代码

//显示：
$(this).children('ul').show();
//等同于
$(this).children('ul').css('display':'block');

//隐藏：
$(this).children('ul').hide();
//等同于
$(this).children('ul').css('display':'none');