jquery 对象内有参数的函数如何调用

转载

mob6454cc627440 2024-09-13 06:44:25

文章标签 jquery jQuery css 文章分类 jQuery 前端开发

一、jquery

1.1 jquery历史

官网：www.jquery.com

jquery 对象内有参数的函数如何调用_jQuery

看见logo和slogan（口号）：写更少的代码，做更多的事情。

官网的自我介绍：

jQuery is a fast, small, and feature-rich JavaScript library.

jQuery是一个快速、小巧的、特点众多的JavaScript库。

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

它用自己非常方便的跨浏览器API，使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变得更简单。

With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

通过把多用途和高拓展性结合起来，jQuery改变了无数程序员书写JavaScript程序的方式。说说jQuery的版本问题：

jQuery的最新版本是3.4.1，不兼容IE6、7、8的。

jQuery1.12.3，兼容IE6、7、8的，更符合中国的实际情况。

jQuery3和jQuery1.12.3的API完全一样。

下载jQuery就是点击官网的链接就行了：

jquery 对象内有参数的函数如何调用_jquery_02

jQuery的哲学是什么：简化DOM开发，为兼容而生！

1.2 引入jquery文件
jquery不是一门新的语言，就是js的一个类库文件。
jquery简化了DOM操作，如添加，删除和修改节点，
jquery都是兼容的，不需要进行能力检测。
要想使用里面的功能，引入jquery文件
执行代码：

1	<script src="js/jquery-1.12.3.min.js">alert(111);</script>
2	<script>
3	// 书写js代码
4	// 检测是否引入成功
5	console.log($);
6	console.log(jQuery);
7	</script>

结果：

jquery 对象内有参数的函数如何调用_jquery_03

说明;

jquery 对象内有参数的函数如何调用_css_04

1.4 体验jQuery

1.4.1 简化对象的选择
jQuery可以通过$(css选择器)的方式来选择对象
执行代码：

1	<div id="box"></div>
2	<!-- 引入jQuery文件 -->
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// 原生js获取box对象
6	var box = document.getElementById('box');
7	console.log(box);
8	// jQuery获得box对象
9	var $box = $('#box');
10	console.log($box);
11	/* 
12	    以后jQuery对象，声明的时候在前面加上一个$,用于区分js对象和jQuery对象
13	    为什么区分：因为不一样 jQuery是一个类库，js调用jQuery的时候，怕你方法用混淆了
14	*/
15	</script>

结果：

jquery 对象内有参数的函数如何调用_jQuery_05

1.4.2 简化了元素的运动

animate(obj, time);

obj: 对象，对象存储了动画的目标

time:过渡时间

执行代码：

1	<div id="box"></div>
2	<!-- 引入jQuery文件 -->
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// 选择元素对象
6	var $box = $('#box');
7	// 动画
8	/* 
9	    animate(obj, time);
10	    obj: 对象，对象存储了动画的目标
11	    time:过渡时间
12	
13	
14	*/
15	$box.animate({left: 500, top: 200}, 2000);
16	</script>

结果：

jquery 对象内有参数的函数如何调用_jquery_06

jquery所有的操作都是批量的，不需要再使用for循环，不管是添加事件还是改变样式都是批量的。

1.4.3 简化样式的操作

css方法：

一个参数:

字符串：表示要获得样式的对应值

对象：要设置的一组样式

二个参数:

设置的样式第一个参数为要设置的样式名，第二个参数为要设置的样式值

执行代码：

1	<div id="box"></div>
2	<!-- 引入jQuery文件 -->
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// 选择元素对象
6	var $box = $('#box');
7	// 样式操作
8	console.log($box.css('width')); // 1个参数代表读取
9	$box.css('backgroundColor', 'pink');// 2个参数代表设置
10	$box.css('left', 300); // 带px的可以省略px直接写数值
11	$box.css('width', '200px'); // 带px的如果写px，必须为字符串
12	$box.css({top: 100, height: 200}); //一个参数为对象的时候表示设置多个样式，每一个样式为一个键值对
13	</script>

结果：

jquery 对象内有参数的函数如何调用_jquery_07

二，$函数/jQuery对象

2.1 jQuery向外暴露的变量
jquery向外暴露的变量是jQuery和$（函数），最开始暴露是jQuery，但是由于书写起来比较费力，所以它增加了一行代码

1	window.jQuery = window.$ = jQuery;

对jQuery的简写。$和jQuery完全等价

执行代码：

1	console.log($ === jQuery);

结果： true

2.2 jQuery对象与js对象的转换
jquery对象转为js对象： $(dom)[index] index表示要获取对象的索引
js对象转为jquery对象： $(js对象)
执行代码：

1	<div id="box"></div>
2	<!-- 引入jQuery文件 -->
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// js获得对象
6	var box = document.getElementById('box');
7	// 获得jquery对象
8	var $box = $('#box');
9	console.log(box);
10	console.log($box);
11	
12	// js对象使用jquery的css方法
13	// box.css('backgroundColor', 'orange');
14	// jquery的对象调用js的属性
15	// $box.innerHTML = 'I LOVE YOU';
16	
17	/* 
18	    js对象与jquery对象的相互转换
19	        jquery对象转为js对象： $(dom)[index] index表示要获取对象的索引
20	        js对象转为jquery对象： $(js对象)
21	*/
22	// jquery的对象调用js的属性 将jquery对象转为js对象
23	$box[0].innerHTML = 'I LOVE YOU';
24	// js对象使用jquery的css方法 --- 将js对象转为jquery对象
25	$(box).css('backgroundColor', 'orange');
26	</script>

结果：

jquery 对象内有参数的函数如何调用_jquery_08

错误分析：

jquery 对象内有参数的函数如何调用_jquery_09

2.3 jquery中不用选择器选择的对象

$(document) $(document.body) $(document.documentElement) $(this) $(window)

2.4 jquery对象的选择器

jquery最好用的是选择器css2.1 css3

jquery选择对象的方法：css选择器

css选择器
标签选择器
id选择器
class选择器
组合选择器
结构选择器
伪类选择器
属性选择器

过滤选择器
$("selector :first")   表示第一个元素
$("selector :last")   表示最后一个元素
$("selector :not(selector2)")  排除selector2后的所有元素
$("selector :even")  位置是偶数的所有元素
$("selector :odd")  位置是奇数的所有元素
$("selector :eq(index)")  equal  位置等于index的元素
$("selector :gt(index)")  greater than  位置大于index所有的元素
$("selector :lt(index)")  lower than  位置小于index的所有元素
$("selector :header")  h1-h6
$("selector").index()  返回元素的位置

内容过滤选择器
$("selector:contain('文本')")   返回含有文本的选择器
$("selector:empty")  返回标签中为空的选择器，连空格都没有
$("selector:has(selector2)) 返回含有selector2的选择器
$("selector:parent") 返回不为空的选择器  含有空格也算不为空

结构：

1	<div id="box">111111</div>
2	<div class="item">11</div>
3	<div class="item">12</div>
4	<div class="item">13</div>
5	<div class="item">14</div>
6	<div class="item">15</div>
7	<div class="item">16</div>
8	<div class="item">17</div>
9	<ul>
10	    <li>1</li>
11	    <li>2</li>
12	    <li>3</li>
13	    <li>4</li>
14	</ul>

执行代码：

1	<script>
2	// 通过css选择器来获得对象
3	// id选择器
4	// console.log($('#box'));
5	$('#box').css('color', 'red');
6	// 类选择器 : jquery在设置样式属于批量操作
7	$('.item').css('color', 'blue');
8	// 标签选择器
9	$('ul').css('backgroundColor', 'pink');
10	// 组合选择器
11	$('ul, #box').css('fontSize', 25);
12	// 结构选择器
13	$('li:nth-child(3)').css('color', 'green');// 从1开始
14	// 选择第4个li
15	$('li:eq(3)').css('color', 'blue');// 从0开始
16	// jquery提供了eq方法
17	$('li').eq(1).css('color', 'orange');
18	// 奇数   odd//偶数
19	$('.item:nth-child(odd)').css('backgroundColor', 'cyan');
20	$('.item:nth-child(even)').css('backgroundColor', '#ccc');
21	</script>

结果：

jquery 对象内有参数的函数如何调用_css_10

2.5 jquery绑定事件的方式
jquery绑定事件一共分为两种方式：
1、和js方式相同: $(dom).on(type,fn) type:表示事件类型 fn:事件处理程序

2，$(dom).type(fn); type:表示事件类型 fn:事件处理程序

1	<button id="btn1">点我1</button>
2	<button id="btn2">点我2</button>
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// 获取元素对象
6	var $btn1 = $('#btn1');
7	var $btn2 = $('#btn2');
8	
9	/*
10	    jquery绑定事件一共分为两种方式：
11	        1、和js方式相同
12	        $(dom).on(type,fn)  type:表示事件类型  fn:事件处理程序
13	        2、$(dom).type(fn); type:表示事件类型  fn:事件处理程序
14	*/
15	// 点击事件
16	// 第一种形式
17	$btn1.on('click', function() {
18	    alert('请不要点我');
19	});   
20	
21	// 第二种形式
22	$btn2.click(function() {
23	    alert('小样，继续点我啊！');
24	});
25	</script>

结果：

jquery 对象内有参数的函数如何调用_jquery_11

事件注销
对象.unbind("事件类型")
对象.off(事件类型)

1.一个事件类型，多个结果
对象.on(type,fn).on(type2,fn2)
2.多个事件类型，一个结果
对象.on("type type2",fn)
3.多个类型多个结果
对象.on({"type":fn,"type2":fn2})

4.hover = mouseover + mouseout
对象.hover(fn,fn2)
5.事件的委派
给动态新增加的dom元素的绑定事件
$("父元素").delegate("子元素",事件类型,fn)

三，常用的方法和属性

3.1方法:size()
3.11属性：length
获得集合的元素对象的个数
size方法：不建议使用，建议使用length

1	<button id="btn1">点我1</button>
2	<button id="btn2">点我2</button>
3	<button id="btn3">点我3</button>
4	<button id="btn4">点我4</button>
5	<script src="js/jquery-1.12.3.min.js"></script>
6	<script>
7	// 获得所有的btn
8	console.log($('button'));
9	// jquery的操作属于批量操作，比如设置样式获取对象
10	// length 属性：获得对象的个数
11	console.log($('button').length);
12	// 不常用的方法：不建议使用 size() 获得对象的个数
13	console.log($('button').size());
14	
15	</script>

3.2 css方法
参数：
一个参数：
字符串：表示获得指定样式的值
对象：设置多组（一组）样式
二个参数：
设置样式：第一个参数表示要设置的属性名，第二个参数代表要设置的属性值

注意：jQuery在设置样式的时候是批量操作的，在获取样式的时候，如果选择的是多个对象，只会获取所有对象中的第一个
执行代码：

1	<script>
2	// 获得元素对象
3	var $div = $('div');
4	// 设置样式 --- 批量
5	$div.css('fontSize', 30);
6	// 获取 --- 只获取第一个
7	console.log($div.css('color')); 
8	</script>

结果：

jquery 对象内有参数的函数如何调用_jQuery_12

3.3 html方法

无参数的时候： $(dom).html() 表示获得元素对象的文本内容

有参数的时候: $(dom).html(str) 表示将dom元素的文本内容更改为str

执行代码：

1	<div></div>
2	<button id="btn1">写入内容</button><button id="btn2">获得div的内容</button>
3	<script src="js/jquery-1.12.3.min.js"></script>
4	<script>
5	// 获得元素对象
6	var $btn1 = $('#btn1');
7	var $btn2 = $('#btn2');
8	var $div = $('div');
9	
10	// 绑定点击事件
11	// btn1
12	$btn1.click(function() {
13	    $div.html('就是我！');
14	});
15	
16	// btn2
17	$btn2.click(function() {
18	    alert($div.html());
19	});
20	</script>

3.4hide和show、toggle
hide:隐藏.只有当前元素的状态是dispiay:block的时候才可以使用，最终状态是 display:none
show:显示.只有当前元素的状态是display:none的时候才可以使用，最终状态是display:block
toggle:显示,消失,切换
注意：三个方法都可以添加时间，时间单位为ms，表示过渡时间，如果没有写时间则表示“干蹦”效果

执行代码：

1	<div></div>
2	<button>hide</button>
3	<button>show</button>
4	<button>toggle</button>
5	<script src="js/jquery-1.12.3.min.js"></script>
6	<script>
7	// 隐藏
8	$('button').eq(0).click(function() {
9	    // $('div').hide();
10	    $('div').hide(1000);
11	});
12	// 显示
13	$('button').eq(1).click(function() {
14	    // $('div').show();
15	    $('div').show(1000);
16	});
17	// 切换
18	$('button').eq(2).click(function() {
19	    // $('div').toggle();
20	    $('div').toggle(1000);
21	});
22	</script>

3.4 获取元素属性方法
1.attr用于设置和获得标签的原有属性，还可以操作自定义标签
一个参数：获得属性
$(dom).attr(key)
key：属性名
两个参数：设置属性
$jquery 对象内有参数的函数如何调用_jQuery_13$ obj.removeAttr(attrName)
执行代码：

1	<img src="images/aoyun/0.jpg" alt="">
2	<script src="js/jquery-1.12.3.min.js"></script>
3	<script>
4	// 获得图片的src属性
5	console.log($('img').attr('src'));
6	
7	// 鼠标移入的时候变成另一张图片，鼠标离开的时候变回原来的图片
8	$('img').mouseenter(function() {
9	    // 换成另一张图片
10	    $('img').attr('src', 'images/aoyun/1.jpg');
		 $('img')..removeAttr('src');
11	});
12	
13	$('img').mouseleave(function() {
14	    // 换成另一张图片
15	    $('img').attr('src', 'images/aoyun/0.jpg');
16	});
17	
18	</script>

2.prop() 方法只能操作w3c规定的标签属性
一个参数：获得属性
$(dom).prop(key)
key：属性名
两个参数：设置属性
$jquery 对象内有参数的函数如何调用_jQuery_14$ obj.removeProp(attrName)
3.5 addClass（）和 removeClass（）
addClass（）：添加class
removeClass（）:移除class
注意：
⦁ addClass （）可以添加一个class也可以添加多个class，添加多个class的方式为 addClass(“A B”)中间用空格
⦁ removeClass：
⦁ 无参数：清空class属性值
⦁ 如果有值：清除指定的class值
执行代码：

1	<div class="a">i love you!</div>
2	<script src="js/jquery-1.12.3.min.js"></script>
3	<script>
4	// 给div绑定鼠标移入事件，当鼠标进入的时候，样式放生改变
5	$('div').on('mouseenter', function() {
6	    $('div').addClass('cur active');
7	    // $('div').addClass('cur');
8	});
9	
10	$('div').on('mouseleave', function() {
11	    // $('div').removeClass('cur'); // 移除指定的class
12	    $('div').removeClass(); // 移除所有
13	});
14	
15	</script>

3.7 slideDown（）和slideUp（）（动画效果）
slideDown（）:缓缓落下
slideUp（）:缓缓升起
slideToggle（）：切换
slideDown（）：只有当元素状态是display:none的时候才可以调用，当元素调用该方法的时候，元素的height瞬间为0，然后以动画的形式变到元素的初值height，最终状态是display:block。
slideUp（）相反。
注意：默认给了过渡时间400ms

1	<div></div>
2	<button>slideDown</button>
3	<button>slideUp</button>
4	<button>slideToggle</button>
5	<script src="js/jquery-1.12.3.min.js"></script>
6	<script>
7	// 落下
8	$('button').eq(0).click(function() {
9	    $('div').slideDown(1000);
10	});
11	// 升起
12	$('button').eq(1).click(function() {
13	    $('div').slideUp(1000);
14	});
15	// 切换
16	$('button').eq(2).click(function() {
17	    $('div').slideToggle(1000);
18	});
19	</script>

3.8 fadeIn()和fadeOut()
fadeIn():淡入
fadeOut():淡出
fadeIn():只有当元素的状态是dispiay；none的时候才可以调用，当元素调用该方法的时候，该元素的opacity：0;(透明度），然后opacity慢慢的增加到1，display:block;默认400ms
fadeOut():相反
fadeTo：达到指定的透明度，fadeTo(600,0.5)第一个参数表示完成事件需要的时间，第二个参数表示透明度
fadeToggle:切换
执行代码：

1	<div></div>
2	<button>fadeIn</button>
3	<button>fadeOut</button>
4	<button>fadeTo</button>
5	<button>fadeToggle</button>
6	<script src="js/jquery-1.12.3.min.js"></script>
7	<script>
8	// 淡入
9	$('button').eq(0).click(function() {
10	    $('div').fadeIn(2000);
11	});
12	// 淡出
13	$('button').eq(1).click(function() {
14	    $('div').fadeOut(2000);
15	});
16	// 达到指定的透明度
17	$('button').eq(2).click(function() {
18	    $('div').fadeTo(2000, .5);
19	});
20	// 切换
21	$('button').eq(3).click(function() {
22	    $('div').fadeToggle(2000);
23	});
24	</script>

⦁ 四，节点的查找

4.1 this
this代表本对象，触发该事件的对象。
jquery中三个不需要使用双引号 $jquery 对象内有参数的函数如何调用_jquery_15$ (document).$(windows)
一群div，点谁谁的背景变为红色
执行代码：

1	<div>1</div>
2	<div>2</div>
3	<div>3</div>
4	<div>4</div>
5	<div>5</div>
6	<div>6</div>
7	<div>7</div>
8	<div>8</div>
9	<div>9</div>
10	<div>10</div>
11	<script src="js/jquery-1.12.3.min.js"></script>
12	<script>
13	// 给所有的div绑定了点击事件
14	$('div').click(function() {
15	    // console.log(1111);
16	    // 触发该事件的对象，背景变为红色
17	    $(this).css('backgroundColor', 'red');
18	});
19	</script>

4.2 parent()
当前元素的父元素,父节点，只会选中亲父亲不会选中爷爷或者曾爷爷
结构：

1	<div class="box">
2	    <div class="item"></div>
3	    <div class="item"></div>
4	    <div class="item"></div>
5	    <div class="item"></div>
6	    <div class="item"></div>
7	</div>
8	<div class="box">
9	    <div class="item"></div>
10	    <div class="item"></div>
11	    <div class="item"></div>
12	    <div class="item"></div>
13	    <div class="item"></div>
14	</div>
15	<div class="box">
16	    <div class="item"></div>
17	    <div class="item"></div>
18	    <div class="item"></div>
19	    <div class="item"></div>
20	    <div class="item"></div>
21	</div>

执行代码：

1	/* 
2	    点击class值为item的div的时候，当前元素的背景变为橙色，父元素的变为紫色
3	*/
4	$('.item').click(function() {
5	    // 当前元素的背景变为橙色
6	    $(this).css('backgroundColor', 'orange');
7	    // 父元素的变为紫色
8	    $(this).parent().css('backgroundColor', 'purple');
9	});
10

4.3 parents
先辈元素

$(dom).parents() 获得所有的先辈元素
$(dom).parents(过滤条件) 获得指定的先辈元素
执行代码：
1	<script>
2	// 获得所有的先辈元素
3	console.log($('.item').parents());
4	// 获得指定的先辈元素
5	console.log($('.item').parents('.box'));// 添加过滤的条件
6	</script>

4.4 children
获得所有的子元素
注意：只查找儿子辈，不找孙子辈
执行代码：
1
结果：

4.5 siblings 其他的兄弟元素
兄弟节点
执行代码：

1	<script>
2	// 给所有的div绑定了点击事件
3	$('div').click(function() {
4	    // console.log(1111);
5	    // 当前元素的背景变为橙色
6	    // $(this).css('backgroundColor', 'orange');
7	    // 触发该事件的对象，背景变为红色
8	    // $(this).siblings().css('backgroundColor', 'red');
9	    // jquery支持一个链式操作：连续打点操作 原理：jquery在实现方法的时候，return this
10	    $(this).css('backgroundColor', 'orange').siblings().css('backgroundColor', 'red');
11	
12	});
13	</script>

4.6 jquery支持连续打点调用
执行代码：

1	$(this).css('backgroundColor', 'orange').siblings().css('backgroundColor', 'red');

原理代码：

1	<script>
2	// 获得元素对象
3	var div = document.getElementById('box');
4	
5	// 给div添加方法
6	div.css = function(k, v) {
7	    this.style[k] = v;
8	    // 将改变后的对象返回
9	    return this;
10	}
11	div.css('color', 'red').css('fontSize', '30px');
12	</script>

4.7 其他节点查找
next 下一个兄弟元素
prev 上一个兄弟元素
nextAll 下面所有的兄弟元素
prevAll 上面所有的兄弟元素
执行代码：

1	/* 
2	    1、当前元素背景变为黑色
3	    2、当前元素下一个元素背景变为粉色
4	    3、当前元素上一个元素背景变为绿色
5	    4、当前元素父元素元素背景变为紫色
6	    5、当前元素父元素元素所有弟弟元素背景变为黄色
7	    5、当前元素父元素元素所有哥哥元素背景变为红色
8	*/
9	$('.item').click(function() {
10	    $(this).css('backgroundColor', 'black');
11	    $(this).next().css('backgroundColor', 'pink');
12	    $(this).prev().css('backgroundColor', 'green');
13	    $(this).parent().css('backgroundColor', 'purple');
14	    $(this).parent().nextAll().css('backgroundColor', 'yellow');
15	    $(this).parent().prevAll().css('backgroundColor', 'red');
16	
17	});

结果：

jquery 对象内有参数的函数如何调用_jQuery_16