一.jQuery的本质上是一个函数
二.jQuery入口函数操作:
$(document).ready(function) (){});
$(function(){});
模拟window.onload的功能 $(window).on('load',function(){});
三.DOM对象和jQuery对象
感念: 1.DOM对象:是通过DOM方式获取的页面中的元素。2.jQuery对象:是通过jQuery方式获取的页面中的元素.
区别: 1.DOM对象只能使用DOM的相关功能 . 2.jQuery对象只能使用jQuery的相关功能
关系: 1.jQuery对象是DOM对象的包装集(jQuery对象里面放置了获取的DOM对象).
2.jQuery对象是一个伪数组结构,内部保存了DOM对象
将jQuery对象转换为DOM对象:
1.根据下标获取内部的DOM对象:
console.log($('div')[0]); console.log($('div')[1]);
2.使用get方法进行DOM对象获取:
console.log($('div').get(0)); // 相当于$('div')[0]
console.log($('div').get(1)); // 相当于$('div')[1]
四. jQuery的相关选择器:
1 id选择器:通过#作为标识
// $('#box').text('这是box');
2 类选择器:通过.作为标识
// $('.box').text('这是类名为box的元素');
3 标签选择器:传入标签名
// $('div').text('这是div');
4 子代选择器:通过>作为标识
// $('#list>li').css('backgroundColor', 'red');
5 后代选择器:通过空格作为标识
// $('#list li').css('backgroundColor', 'red');
6 根据下标操作的选择器:
6.1 获取元素中下标为偶数的部分元素,通过:even进行标识
// $('li:even').text('这是下标为偶数的li');
6.2 获取元素中下标为奇数的部分元素,通过:odd进行标识
// $('li:odd').text('这是下标为奇数的li');
6.3 根据指定下标获取元素,通过:eq()进行标识
// $('li:eq(2)').text('这是第三个li');
五.筛选选择器: 是通过方法形式来使用,目的是为了完善jQuery的链式编程写法
参数是选择器字符串,可以选取子元素中的某些部分,默认选择所有
// $('#list').css('width', 200).children().css('backgroundColor', 'red');
$('#list').children('.item').text('这是具有item类名的li');
1.children() 子代选择器
2.find() 后代选择器 ---find 不传参数不能使用,功能会被忽略,必须传入参数,是一个选择器字符串
3.parent() 父元素选择器 --具有参数,不传时获取所有父元素,如果传入根据选择器选择某些父元素
4.parents () 祖先元素选择器 ---parents不传参数,会获取所有的外部的祖先元素-
5.siblings() 获取同级元素 ---选择器参数,可选
6.prev() 和next()获取同级的上一个或下一个元素 ---选择器参数,可选
7.prevAll() 和nextAll() 获取同级前面的所有元素 或 后面的所有元素 --选择器参数,可选