JQueryd day （1）

最新推荐文章于 2022-04-21 10:49:06 发布

初心魏

最新推荐文章于 2022-04-21 10:49:06 发布

阅读量172

点赞数

分类专栏：微信小程序文章标签： Jquery 事件 $

本文链接：https://blog.csdn.net/qq_42306803/article/details/88215577

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、JQuery
二、JQuery选择器
三、JQuary常用方法
四、节点操作
五、基础事件
六、事件对象
- 6.1 概念
- 6.2 事件对象的event属性

一、JQuery

1.1 什么是JQuary

JQuary是一个Javascript库（框架），通过封装原生的Javascript函数得到一整套定义好的方法。

1.2 第一个JQuery程序

首先在项目中引用JQuery库
然后写代码

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
	   	$(function(){
			$('input').click(function(){
				alert("第一个JQuery程序");
			});
		})
	   </script>

1.3 为什么使用$(function(){})这段代码?

因为JQuery库文件是在body元素之前加载的。我们必须等待所有的DOM元素加载完之后，延迟支持DOM操作，否则无法获取到。这段代码的作用就是延迟JQuary文件在body元素加载后再加载。

1.4 JQuery对象与原生的DOM对象之间的转换

Jquery---->DOM
通果get()方法

$('div').click(function(){
				alert("第一个JQuery程序");
				$('div').get(0).style.backgroundColor = "yellow";
			});

DOM---->JQuery
$(原生JDOM对象)

$(function(){
			$(document.getElementsByTagName("div")[0]).css('background-color','red');
			$('div').click(function(){
				alert("第一个JQuery程序");
			});
		})

二、JQuery选择器

2.1 常规选择器

选择器	CSS模式	JQuery模式	描述
标签选择器	div{}	$(‘div’)	获取所有div标签的DOM对象
类选择器	.class{}	$(’.class’)	获取所有类名为class的DOM对象
ID选择器	#ID{}	$(’#IID’)	获取一个ID为ID的DOM对象

2.2 JQuery属性

length
size()
作用：都可以获取JQuery对象中的元素个数

//size()方法
var num = $('div').size();
alert(num)；

//length方法
var num = $('div').length;
alert(num);

2.3 进阶选择器

选择器	CSS模式	JQuery模式	描述
群组选择器	span,em,box.{}	$(‘span,em,box’)	获取多个选择器的DOM对象
后代选择器	ul,li,a{}	$(‘ul,li,a’)	获取追溯到的多个DOM对象
同配选择器	*{}	$(’*’)	获取所有元素标签的选择器对象

//将所有的ul里面的li标签的字体大小设置为80px
$('ul,li').css('font-size','80px');

2.4 高级选择器

选择器	CSS模式	JQuery模式	JQuery等价方法	描述
后代选择器	ul li a{}	$(‘li li a’)	find(‘p’)	获取追溯到的多个DOM对象
子选择器	div>p{}	$(‘div>p’)	children()	只获取子节点的多个DOM对象
next选择器	div+p{}	$(‘div+p’)	next()	只获取某一节点后一个同一级的DOM对象
nextAll选择器	div-p{}	$(‘div-p’）	nextAll()	获取某节点后所有的同一级DOM对象

2.5 过滤选择器

过滤器名	JQuery语法	JQuery对应的方法	说明	返回
:first	$(‘li:first’)	first()	选取第一个元素	单个元素
:last	$(‘li:last’)	last()	选取最后一个元素	单个元素
:eq(index)	‘li:eq(2)’	eq(2)	选取索引等于index的元素	单个元素

$(function(){
			$('li:first').css('font-size','40px');
			$('li:eq(1)').css('font-size','40px');
			$('li:last').css('font-size','40px');
			$('li').first().css('color','red');
			$('li').eq(1).css('color','blue');
			$('li').last().css('color','yellow');
		})

//body标签:
	<body>
		<ul>
			<li>你好</li>
			<li>大家好</li>
			<li>啦啦啦</li>
		</ul>
	</body>

三、JQuary常用方法

3.1 html()和text()方法

方法名	描述
html()	获取元素中html方法
html(value)	设置元素中html方法
text()	获取元素中文本内容
text(value)	设置原生中文本内容
val()	获取表单中的文本内容
val(value)	设置表单中的文本内容

$(function(){
		$('li').first().text("豆豆是猪");
		$('li').eq(2).html("豆豆是猪");
		$('li').first().text($('li').first().text()+"都是猪");
})

3.2 遍历容器中所有元素的方法

$(function(){
			 var v = $('li');
			 v.each(function(index,ele){
				 $(ele).css('color','red');
			 })
		})


body标签:
	<body>
		<ul>
			<li>你好</li>
			<li>大家好</li>
			<li>啦啦啦</li>
		</ul>
	</body>

3.3 attr()与removeattr()方法

方法名	描述
attr(key)	获取某个元素key属性的属性值
attr(key,value）	设置某个元素的key属性的值为value
attr(key1:value1，key2：vlaue1， key3：value3	给某个元素的多个key属性设值
attr(key,function(index,ele)	通过方法设值某个元素key属性的值
removeAttr(key)	根据属性名称移除某个属性

3.4 css操作方法

方法名	描述
css(name)	获取某个标签内容的css样式
css([name1,name2,name3])	获取某个标签内容的css样式
css(name,value)	设置某个标签内容的css样式
css(name,function(index,value)	设置某个标签内容的css样式
addClass（class）	给某个标签添加一个类属性
addClass(class1,class2,class3)	给某个标签添加多个类属性
removeClass(class)	删除某个标签的类属性
toggleClass)	来回切换默认样式和指定样式

给某个元素添加一个类：

	$(function(){
			alert(20);
			$('li').eq(2).addClass('myid');
			alert(3);
			});

将某个元素的class属性删除

$(function(){
			$('li').eq(2).removeClass('class');
			});

给元素的某个属性赋值

$('li').eq(2).css('font-size','100px');

获取元素的属性值:

alert($('li').eq(2).css('font-size'));

获取多个标签内容的css样式

	$(function(){
			var box = $('li').eq(2).css(['font-size','color']);
			for(var i in box) {
				alert(box[i] + " ");
			}
			});

3.5 width和length方法

方法名	描述
width()	获取某个元素的长度
width(value)	设值某个元素的长度
height()	获取某个元素的长度
height()	设置某个元素的长度

实质元素的长度和宽度的单位可以是pt；

四、节点操作

4.1 创建节点

var node = $('<div id="dd">节点</div>');
$('body').append(node);

4.2 内部插入节点方法

方法名	描述
append(content)	将节点content插入到指定元素内部后面
append(function(index,html){}）	使用匿名函数向指定元素内部后面插入节点content
appendTo(content)	将元素移到指定元素content内部后面
prepend(content)	将节点content插入到指定元素内部前面
prepend(function(index,html){})	使用匿名函数将节点contend插入到指定位置前面
prepentTo(contend)	将元素移动到指定元素contend内部前面

//append(content)方法

var node = $('<div>苦苦</div>');
			var ul1 = $('ul');
			ul1.append(node);

//appendTo(content)方法

var node = $('<div>苦苦</div>');
			var ul1 = $('ul');
			node.appendTo(ul1);

//prepend(content)方法

var node = $('<div id = "di">你好</div>');
			var li = $('ul');
			li.prepend(node);

4.3 外部插入节点方法

方法名	描述
after(content)	向指定元素的外部后面插入节点node
after(function(index,html){})	使用匿名函数想指定的元素外部后面插入节点content
before(content)	向指定元素的外部的前面插入节点node
before(function)(index,html){})	使用匿名函数在指定的位置插入节点content
InsertAfter(content)	将指定节点移到指定元素content外部的后面
InsertBefore(content)	将指定节点移到指定元素content外部的前面

//after(content)方法

var node = $('<div>苦苦</div>');
			var ul1 = $('ul');
			ul1.after(node);

//before()方法

var node = $('<div>苦苦</div>');
			var ul1 = $('ul');
			ul1.before(node);

4.4 包裹节点

wrap(html)	向指定元素包裹一层html代码
wrap(element)	向指定元素包裹一层DOM对象节点
wrap(function(index){})	使用匿名函数向指定元素包裹一层自定义内容
unwrap()	移除一层指定元素包裹的内容
wrapAll(html)	用HTML将所有元素包裹到一起
wrapAll(DOM)	用DOM对象将所有元素包裹到一起
wraplnner(html)	向指定元素的子内容包裹一层HTML
wraplnner(DOM)	向指定元素的字内容包裹一层DOM对象
wraplnner(function(){})	用匿名函数向指定元素的子内容包裹一层自定义内容

//wrap(function(index){})

ul1.wrap(function(index){
				return $('<div>卡卡卡</div>');
			})

4.5 复制，替换，删除节点

4.5.1 复制节点

$(‘ b o d y ’) . a p p e n d ($ (‘div’).clone(true));
复制一个节点添加到 HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true参数的话，这个元素附带的事件处理行为也复制出来。

4.5.2 删除节点

$(‘div’).remove();
$(‘li’).remove("#li1");
注意：remove方法里的参数表示只删除li标签里id为li1的标签。
$(‘div’).detach(); 保留事件行为的删除
注意：remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

4.5.3 清空节点

$(‘div’).empty();
删除掉节点里的内容

4.5.4 替换节点

replaceWith()
替换节点
replaceAll(‘div’);
注意：节点被替换后，所包含的事件行为就全部消失了。

$('div').replaceWith('<span>节点</span>');

五、基础事件

5.1 绑定事件

bind(type, [data], fn)

type 表示一个或多个类型的事件名字符串；
[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；
fn 表示绑定到指定元素的处理函数。

var vv = $('div').css('height','40px').css('width','100px').css('border','2px red solid');
			  vv.bind('click',function(){
				alert(2);

5.2 解绑事件

使用 unbind 删除绑定的事件$(‘input’).unbind();
删除所有当前元素的事件
使用 unbind 参数删除指定类型事件
$(‘input’).unbind(‘click’); /
删除当前元素的 click 事件
使用 unbind 参数删除指定处理函数的事件
function fn1() {alert(‘点击 1’);}
function fn2() {alert(‘点击 2’);}
绑定了两个事件函数$(‘input’).bind(‘click’, fn1);
$(‘input’).bind(‘click’, fn2);
$(‘input’).unbind(‘click’, fn1);
只删除 fn1 处理函数的事件

5.3 给匿名事件添加命名空间

作用：用来区分不同的匿名事件

 vv.bind('click.a',function(){
				alert(2);
			});
			 vv.bind('click.b',function(){
				 alert(3);
			 })

用法:事件类型.名称
解绑特定名称的匿名事件

vv.bind('click.b', function() {
					alert(3);
				})
				vv.unbind('click.b');

如这里解绑名称为b的click事件。

也可以用vv.unbind(’.b’);这里是解绑名称为b的不同事件。

5.4 简写事件

方法名	触发条件	描述
click(fn)	鼠标	触发每一个匹配元素的 click(单击)事件
dblclick(fn)	鼠标	触发每一个匹配元素的 dblclick(双击)事件
mousedown(fn)	鼠标	触发每一个匹配元素的 mousedown(按下)事件
mouseup(fn)	鼠标	触发每一个匹配元素的 mouseup(抬起)事件
mouseover(fn)	鼠标	触发每一个匹配元素的 mouseover(鼠标移入)事件
mouseout(fn)	鼠标	触发每一个匹配元素的 mouseout(鼠标移出)事件
keydown(fn)	键盘	触发每一个匹配元素的 keydown(键盘按下)事件
keyup(fn)	键盘	触发每一个匹配元素的 keyup(键盘按下弹起)事件
keypress(fn)	键盘	触发每一个匹配元素的 keypress(键盘按下不松开)事件
focus(fn)	键盘	触发每一个匹配元素的 focus(焦点激活)事件
blur(fn)	表单	触发每一个匹配元素的 blur(焦点丢失)事件
select(fn)	表单	触发每一个匹配元素的 select(文本选定)事件
change(fn)	表单	触发每一个匹配元素的 change(值改变)事件
submit(fn)	表单	触发每一个匹配元素的 submit(表单提交)事件

5.5 复合事件

方法名	描述
ready(fn)	当 DOM 加载完毕触发事件
hover([fn1,]fn2)	当鼠标移入触发第一个 fn1，移出触发 fn2

//背景移入移出切换效果
$('div').hover(function () {
$(this).css('background', 'black'); }, 
function () {
$(this).css('background', 'red'); });

六、事件对象

6.1 概念

事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event事件对象，event 对象有很多可用的属性和方法，

6.2 事件对象的event属性

属性名	描述
type	获取这个事件的事件类型，例如：click
currentTarget	currentTarget 得到的是监听元素的DOM对象,等同与 thise. currentTarget 获取到的是,谁绑定的事件,那就是谁
relatedTarget	获取移入移出目标点,离开或进入的那个 DOM 元素
data	获取事件调用时的额外数据
which	获取鼠标的左中右键(1,2,3)，或获取键盘按键
timeStamp	获取事件触发的时间戳(当前时间的毫秒值)

初心魏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQueryd day （1）

文章目录一、JQuery1.1 什么是JQuary1.2 第一个JQuery程序1.3 为什么使用$(function(){})这段代码?1.4 JQuery对象与原生的DOM对象之间的转换二、JQuery选择器2.1 常规选择器2.2 JQuery属性2.3 进阶选择器2.4 高级选择器2.5 过滤选择器三、JQuary常用方法3.1 html()和text()方法3.2 遍历容器中所有元素的方...
复制链接

扫一扫