jQuery随笔1

jQuery知识点梳理

简介

// 1 jQuery是一个js库，实际上就是一个js文件，内部有许多其他人给我们写好的功能，我们只需要学习使用方式即可。

    // 2 版本简介：
    //   jQuery分为3大版本
    //    1.x 版本 兼容现代浏览器
    //		2.x 版本（不支持ie678）
    //    3.x 版本（不支持ie678）

    // 3 压缩与未压缩版本的区别:
    //   压缩版本适用于上线使用（生产环境），好处是体积小
    //   未压缩版本使用于开发与学习，好处是有注释

入口函数

$(document).ready(function () {
			console.log('这是jq的入口函数1');
		});
		$(function () {
			console.log('这是jq的入口函数2');
		});

1
2
3

window.onload = function () {
			console.log('这是js的入口函数');
		};

js 与 jquery 入口函数区别

js的入口函数：
在页面加载完成后（结构，图片，文件）执行内部代码。

 jQuery的入口函数：
执行时机： 在页面的结构加载完毕后执行内部代码。
如果希望使用jQuery时也可以在页面加载完成后执行，可以使用jQuery的方式给window对象设置一个load事件(后面的事件操作部分说明)。
// 要求掌握：
//   1 jQuery入口函数的写法。
//   2 jQuery入口函数与js入口函数执行时机的区别。

jQuery顶级对象

1	`jQuery中的顶级对象有两个，一个叫$，另一个叫jQuery// console.log($ === jQuery); // true`

$

$这个函数根据传入的参数形式不同，会具有不同的功能：

1 选择器功能： $(‘div’);

2 入口函数功能： $(function () {});

3 给DOM对象设置新的功能：$(document).ready(function () {})

选择器

1 标签选择器
$(‘div’).text(‘这是内容’);
2 id选择器
$(‘#box’).text(‘这是box’);
3 类选择器
$(‘.box’).text(‘这是类名为box的元素’);
4 子代选择器
$(‘#list>li’).css(‘backgroundColor’, ‘red’);
5 后代选择器
$(‘#list li’).css(‘backgroundColor’, ‘red’);
交集选择器
获取页面中的类名为box的div
$(‘div.box’).text(‘这是类名为box的div’);
并集选择器
$(‘div,p’).text(‘这是div和p标签’);

过滤选择器

:eq(index) $(‘li:eq(2)’).CSS(‘color’,’red’)
:odd $(‘li:odd’) 奇数行
:even $(‘li:even’) 偶数行
:selected 选中的
:checkbox 选中所有的复选框
:checkbox :checked 选中所有被选中的复选框

筛选选着器

1 children() 子代选择器
children() 不书写选择器参数表示获取所有子元素，如果书写了选择器参数表示选择指定的部分内容
我们发现，这个选择器与 $(‘#list>li’) 的功能是相似的，好处是可以完善链式编程操作。
2 find() 后代选择器
注意：find()如果不设置选择器参数，不会生效

1	`$('#list').find('li').css('backgroundColor', 'red');`

3 parent() 父元素获取,相当于parentNod
由于jQuery对象中可能具有多个DOM对象，所以parent()获取的结果可能为多个元素

1	`$('p').parent().css('width', '100px');`

4 parents() 祖先元素
parents方法可以不书写参数直接使用，但是没有意义，所以还是推荐设置参数后使用
5 siblings() 同级元素(兄弟元素)

1	`$('#item').siblings('.item').text('这是同级元素');`

6 next() 下一个 prev() 上一个

1 2	`$('#item').next('.item2').text('这是下一个同级元素'); $('#item').prev('.item').text('这是上一个同级元素');`

7 nextAll()
前面所有同级元素
nextAll

1	`$('#item').nextAll('.item').text('这是后面的所有同级元素');`

8 eq() 根据指定下标获取元素

// var index = 1; // 例如index变量中保存了需要操作的元素下标值
// $('#list2>li:eq(' + index + ')')
// eq()是推荐的形式，好处可以不进行字符串拼接。
$('#list2>li').eq(index).css('backgroundColor', 'red');

DOM对象与jQuery对象

1获取方式

DOM对象：通过DOM的方式获取的标签。
jQuery对象：通过jQuery的方式获取的标签。

2 DOM对象与jQuery对象之间的关系

我们会称jQuery对象是DOM对象的包装集（jQuery对象是一个伪数组，内部包裹了一个或多个DOM对象）

1
2
3

/*var box = document.getElementById('box'); 
console.dir(box);
console.log($('div'));*/

3 DOM对象与jQuery对象使用时的注意点：

DOM对象只能使用DOM的功能，不能使用jQuery的功能
// jQuery对象只能使用jQuery的功能，不能使用DOM的功能

4 DOM对象与jQuery对象的转换方式

将DOM对象转换为jQuery对象：通过$()包裹即可

/var box = document.getElementById(‘box’);
$(box).text(‘这是新的内容’);/

将jQuery对象转换为DOM对象：

$(‘#box’)[0].innerHTML = ‘这是box的内容’; // 推荐方式
$(‘#box’).get(0).innerHTML = ‘这是更新的内容’;

获取元素

获取多个标签中下标为奇数的元素

$(‘li:odd’).text(‘这是下标为奇数的元素’);

获取多个标签中下标为偶数的元素

$(‘li:even’).text(‘这是下标为偶数的元素’);

获取下标为多少的元素

$(‘li:eq(2)’).text(‘这是第三个li’);

jQuery的两大特性

1 链式编程

含义：任意的设置型操作后可以继续操作当前对象。
	//  $('#box').text('这是box的内容').css('backgroundColor', 'red');

	// 下面是一个内容获取操作，获取操作后是对返回的结果操作了，而不是box
	//   $('#box').text().
	//   console.log($('#box').text());

2 隐式迭代：偷偷的遍历

//	隐式迭代只能在设置操作时生效
//	$('div').css('width', '100px');

// 下面是对jQuery对象进行获取操作，不会隐式迭代，只获取到第一个div的宽度
console.log($('div').css('width'));

设置样式操作.css()

设置样式操作：

$('#box').css('backgroundColor', 'red'); // 推荐
 $('#box').css('background-color', 'red'); // 不推荐，推荐使用驼峰（上一种）
$('#box').css('width', '100px');
$('#box').css('height', 100); // 推荐你们写这个

多个样式的同时设置方式：

$('#box').css({
			width : 100,
			height : 100,
			backgroundColor : 'red'
		});

样式获取操作

1
2
3

注意的点：只能进行单个元素的单个样式获取
		//    获取结果是字符串形式，具有单位
		console.log($('#box').css('width'));

类名操作

1 类名添加 addClass()

1	`$('#box').addClass('colorBlue fl');`

2 移除类名 removeClass()

1
2
3

 移除类名时可以移除一个或多个，并且不需要考虑移除时的书写顺序
$('#box').removeClass('colorBlue');
$('#box').removeClass('fl colorBlue');

3 切换类名 toggleClass()

1 2	`如果某个类名已经存在，会被移除，如果某个类名不存在，会被添加 $('#box').toggleClass('box2 colorBlue');`

4 检测类名是否存在 hasClass()

console.log($('#box').hasClass('colorBlue')); // true
		console.log($('#box').hasClass('box6')); // false
// 使用时不推荐同时检测多个类名，可能不准确。（需要保证书写顺序一致）
		//   console.log($('#box').hasClass('fl colorBlue'));

		// 使用多个类名时进行检测，只要某个元素具有指定类名即可返回true，不推荐
		// console.log($('div').hasClass('box1'));

动画

show与hide

show与hide不设置参数时，是普通的显示与隐藏效果，不具有动画

$('#btn1').click(function () {
			// 参数1 运动时间，毫秒单位
			// 参数2 函数，表示运动完毕后执行的操作
			$('#box').show(1000, function () {
				console.log('运动完毕了');
			});
		});

参数1 运动时间，毫秒单位
参数2 函数，表示运动完毕后执行的操作

slideDown()划入

$('#btn1').click(function () {
			// slideDown() 滑入，下拉
			// 参数1: 运动时间，默认为400
			// 参数2: 函数，运动完毕后执行的操作
			$('#box').slideDown(1000, function () {
				console.log('运动完毕了');
			});
		});

slideUp()划出

$('#btn2').click(function () {
			// slideUp()  滑出，上拉
			// 参数1: 运动时间，默认为400
			// 参数2: 函数，运动完毕后执行的操作
			$('#box').slideUp(1000, function () {
				console.log('运动完毕了');
			});
		});

slideToggle()切换

$('#btn3').click(function () {
			// slideToggle() 切换
			// 当前为显示状态，执行slideDown，否则执行slideUp
			// 参数1: 运动时间，默认为400
			// 参数2: 函数，运动完毕后执行的操作
			$('#box').slideToggle(1000, function () {
				console.log('运动完毕了');
			});
		});

fadeIn() 渐入

$('#btn1').click(function () {
			// fadeIn() 渐入
			// 参数1： 运动时间，默认400
			// 参数2： 函数，运动完毕后执行的操作
			$('#box').fadeIn(1000, function () {
				console.log('我渐入了');
			});
		});

fadeOut() 渐出

$('#btn2').click(function () {
			// fadeOut() 渐出
			// 参数1： 运动时间，默认400
			// 参数2： 函数，运动完毕后执行的操作
			$('#box').fadeOut(1000, function () {
				console.log('我渐出了');
			});
		});

fadeToggle() 切换

$('#btn3').click(function () {
			// fadeToggle() 切换
			// 参数1： 运动时间，默认400
			// 参数2： 函数，运动完毕后执行的操作
			$('#box').fadeToggle(1000, function () {
				console.log('我切换了');
			});
		});

fadeTo() 渐到

$('#btn4').click(function () {
			// fadeTo() 渐到
			// 参数1： 运动时间，默认400
			// 参数2： 渐变到什么程度
			// 参数3： 函数，运动完毕后执行的操作
			$('#box').fadeTo(1000, 0.3, function () {
				console.log('我渐到了');
			});
		});

animate() 自定义动画

参数1：运动要修改的样式(必选)
 参数2：运动时间
参数3：运动模式   默认，变速'swing'  匀速'linear'
参数4：运动完毕后执行的操作，函数

stop()结束排队,加到动画前

节点创建操作

1 使用$()内部书写结构的方式可以进行标签创建，但是创建的元素不在页面中显示，需要进行添加操作

1	`$('<div>这是div<p>这是p标签</p></div>')`

html()
html() 相当于innerHTML

1	`$('#box').html('这是box的内容<div>这是div<p>这是p标签</p></div>')`

append()
向某个元素的子节点最后添加元素也可移动元素

// var $div = $('<div>这是创建的div</div>');
			// $('#box').append($div);
// append方法可以直接传入字符串形式的标签结构，可以直接生成
			// $('#box').append('<div>这是div</div><div>这是div</div>');

prepend()
想某个元素的子节点最前面添加元素

1 2	`$('#box').prepend('<div>这是div</div>'); $('#box').prepend($('.text'));`

after()
用于将某个元素添加到指定元素同级的后面

1 2	`// $('.item').after($('.text')); // $('.item').after('<div>这是创建的div</div>');`

before()
用于将某个元素添加到指定元素同级的前面
appendTo() - 与append()对应

1
2
3

// appendTo方法的参数可以直接书写选择器
// $('.text').css('width', 100).appendTo('#box');
 $('#box').append($('.text'));

prependTo() - 与prepend()对应
insertAfter() - 与after()对应
insertBefore() - 将某个元素添加到指定元素的同级的前面

1 2	`// 上面的四个方法与前面案例中的四个方法是对应的，只不过操作的元素与传入的元素书写顺序相反 // 目的是为了完善jQuery的链式编程操作`

清楚元素内部内容

1html()

1	`$('#box').html('');`

2 empty() 用于清除元素的内部内容

1	`$('#box').empty();`

3 remove() 用于移除元素以及内容内容

1	`$('div.box').remove();`

克隆clone()

用于对元素进行克隆操作
参数默认值为false，表示复制标签以及内部内容
参数设置为true表示不仅复制结构，还会复制事件

// DOM中具有一个cloneNode()  false不复制内容  true复制标签以及内部内容

		// jQuery的方法 clone() 用于对元素进行克隆操作
		// 参数默认值为false，表示复制标签以及内部内容
		// 参数设置为true表示不仅复制结构，还会复制事件

		// 注意：DOM中的cloneNode是无法复制事件的，jQuery是可以复制事件的
		$('.box').click(function () {
			console.log('这是box');
		});
		$('body').append($('.box').clone(true));

属性操作方法

prop()

用于操作标签行内的自带属性

// 1 获取操作
//  console.log($('#box').prop('id'));
// 2 设置操作
//  $('#box').prop('class', 'box6');
/*$('#box').prop({
	class : 'box6',
	title : '这是新的title'
});*/
// prop无法操作标签的自定义属性
// console.log($('#box').prop('data-hehe'));

attr()

用于操作标签的行内自定义属性

/*console.log($('#box').attr('data-hehe'));
$('#box').attr('data-hehe', '新内容');*/
// 不推荐使用attr操作自带属性，基本属性可以操作，但是对于表单元素的一些属性操作不便
/*console.log($('#text').attr('disabled')); // 'disabled'
console.log($('#text').prop('disabled')); // true*/

data()

用于操作标签的行内自定义属性

//  与attr方法的区别：在获取自定义行内属性时，可以不加data-
console.log($('#box').data('hehe')); // 获取data-hehe属性的内容
$('#box').data('title', '这是title');
console.log($('#box').data('title'));

样式操作

获取操作：

1 width() 用于获取元素的width属性值

1	`console.log($('#box').width());`

2 innerWidth() 用于获取元素的width+padding

1	`console.log($('#box').innerWidth());`

3 outerWidth() 用于获取元素的width+padding+border

1	`console.log($('#box').outerWidth());`

4 outerWidth(true) 用于获取盒模型的整体宽度

1	`console.log($('#box').outerWidth(true));`

设置操作：

1 width() 用于设置元素的width属性值

1	`$('#box').width(150);`

2 innerWidth() 用于设置元素的width+padding，注意，设置值时只会修改width属性

1	`$('#box').innerWidth(150);`

3 outerWidth() 用于设置元素的width+padding+border，注意，设置值时只会修改width属性

1	`$('#box').outerWidth(150);`

4 outerWidth(数, true) 用于设置盒模型的整体宽度，注意，设置值时只会修改width属性
使用时：先传数，再传true，忘了就试一试

1	`$('#box').outerWidth(150, true);`

页面滚动事件

scroll

滚动事件：某个元素的内部滚动条滚动时触发事件

$(function () {
			// 页面的卷曲尺寸：
			//    卷曲高度：从可视区域顶部，计算到页面的最顶部
			//    卷曲宽度：从可视区域左侧，计算到页面的最左侧

			// 滚动事件：某个元素的内部滚动条滚动时触发事件
			//   scroll

			// scrollTop() 用于获取卷曲的高度
			//   console.log($(window).scrollTop());
			// scrollLeft() 用于获取卷曲的宽度 （了解，不常用）
			//   console.log($(window).scrollLeft());

			$(window).scroll(function () {
				console.log($(window).scrollTop(), $(window).scrollLeft());
			});

		})

事件发展历程

1 简单事件设置方式

/*$('#btn').click(function () {
	console.log('这是点击事件1');
});
		// ....
$('#btn').mouseover(function () {
	console.log('这是点击事件2');
});*/

2 bind() 用于设置事件

/*$('#btn').bind('click mouseover', function () {
			console.log('这是点击事件与移入事件');
		});*/

		/*$('#btn').bind({
			click : function () {
				console.log('这是点击事件');
			},
			mouseover : function () {
				console.log('这是移入事件');
			}
		});*/

3 delegate() 用于设置事件委托3

1
2
3

/*$('#box').delegate('p', 'click', function () {
			console.log('这是使用delegate设置的事件');
		});*/

4 on() jQuery使用on的方式统一了所有的事件设置方式

 4.1 进行简单事件设置
		/*$('#btn').on('click', function () {
			console.log('这是普通事件设置');
		});*/
 4.2 模拟bind方法
		/*$('#btn').on('click mouseover', function () {
			console.log('这是事件');
		});*/
/*$('#btn').on({
			click : function () {
				console.log('这是点击事件');
			},
			mouseover : function () {
				console.log('这是移入事件');
			}
		});*/
 4.3 用于设置事件委托
		// $('#box').on('click', 'p,span,.box,#box', function () {
		// 	console.log('这是事件委托');
		// });

移除事件off()

// unbind() 与 undelegate()

		var fun = function () {
			console.log('这是点击事件');
		};
		$('#box').click(fun);
		$('#box').on('mouseover', function () {
			console.log('这是移入事件');
		});
		$('#box').on('click', 'p', function () {
			console.log('这是事件委托');
		});
		// 要求掌握off()的使用方式 - 用于移除事件
		//   1 不传参数：用于移除所有事件
		//     $('#box').off();
		//	 2 指定类型移除:用于移除指定类型的事件
				//  $('#box').off('click');
			//    $('#box').off('click mouseover');
		//	 3 移除事件委托：
		// 		 $('#box').off('click', '**');
		//   4 指定事件处理程序移除：(最好用，适合任意场景)
		// $('#box').off('click', fun);

取消默认事件效果,阻止传播

1 阻止事件传播: (阻止冒泡)

e.stopPropagation();

2 取消标签默认事件效果: (例如阻止跳转)

e.preventDefault();
由于return false具有两种功能，如果在需求中只需要一种，就可以使用上面的两个方法

return false;

链式编程原理

小结：实际上链式编程的基本原理就是在设置型操作后设置了return this

jQuery

#jQuery

jQuery随笔1

http://www.dwyblog.cn/2019/05/12/jQuery随笔1/

作者

幸福来敲门

发布于

2019年5月12日

许可协议

jQuery_fullpage全屏插件上一篇

HTML5_API 下一篇

jQuery随笔1

jQuery知识点梳理

简介

入口函数

jQuery顶级对象

$

选择器

过滤选择器

筛选选着器

DOM对象与jQuery对象

1获取方式

2 DOM对象与jQuery对象之间的关系

3 DOM对象与jQuery对象使用时的注意点：

4 DOM对象与jQuery对象的转换方式

将DOM对象转换为jQuery对象：通过$()包裹即可

将jQuery对象转换为DOM对象：

获取元素

获取多个标签中下标为奇数的元素

获取多个标签中下标为偶数的元素

获取下标为多少的元素

jQuery的两大特性

1 链式编程

2 隐式迭代： 偷偷的遍历

设置样式操作.css()

设置样式操作：

多个样式的同时设置方式：

样式获取操作

类名操作

1 类名添加 addClass()

2 移除类名 removeClass()

3 切换类名 toggleClass()

4 检测类名是否存在 hasClass()

动画

show与hide

slideDown()划入

slideUp()划出

slideToggle()切换

fadeIn() 渐入

fadeOut() 渐出

fadeToggle() 切换

fadeTo() 渐到

animate() 自定义动画

stop()结束排队,加到动画前

节点创建操作

清楚元素内部内容

1html()

2 empty() 用于清除元素的内部内容

3 remove() 用于移除元素以及内容内容

克隆clone()

属性操作方法

样式操作

获取操作：

设置操作：

页面滚动事件

事件发展历程

取消默认事件效果,阻止传播

1 阻止事件传播: (阻止冒泡)

2 取消标签默认事件效果: (例如阻止跳转)

return false;

链式编程原理

2 隐式迭代：偷偷的遍历