day19-jQuery用法及事件绑定

最新推荐文章于 2025-12-22 21:38:10 发布

原创最新推荐文章于 2025-12-22 21:38:10 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

前期python 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了jQuery的基本概念和用法，包括DOM操作、节点创建与删除、属性与内容的获取与修改，以及事件绑定。jQuery简化了JavaScript中的DOM操作，如通过CSS选择器获取节点，使用.append()和.prepend()添加节点，以及利用.remove()删除节点。此外，还展示了如何获取和修改元素的内容及属性，并讲解了直接和间接事件绑定的方法。

jQuery

一、jQuery是什么

jQuery是一个js库，可以让js的dom操作更简单

二、jQuery用法

（一）jQuery获取节点：$(css选择器)

<div id="div1">
	<p>我是段落1</p>
	<p class="c1">我是段落2</p>
	<a href="">我是超链接1</a>
</div>
<div id="div2">
	<p class="c1">我是段落3</p>
	<p>我是段落4</p>
</div>
<!--1.jQuery获取节点：$(css选择器)-->
<script type="text/javascript">
    //js获取节点用法
	document.getElementsByClassName('c1')[0]
			
	result = $('.c1')
	console.log(result)		
</script>

（二）创建节点: $(html代码)

<script type="text/javascript">
	//1)创建节点：$(html代码)
	p = $('<p class="c1">我是段落5</p>') 
	div = $("<div class='c2'><p>苹果</p><span>×</span></div>")
</script>

（三）添加节点和删除节点

1.节点1是节点2的父亲。

1) 节点1.append(节点2)====在节点1的最后添加节点2。

2) 节点1.prepend(节点2)====在节点1的最前面添加节点2。

2.节点1和节点2是兄弟关系

1) 节点1.before(节点2)====将节点2放在节点1的前面

2) 节点1.after(节点2)====将节点2放在节点1的后面

3.删除节点

节点.remove()

<!--2.创建和添加节点-->
<script type="text/javascript">
	//1)创建节点：$(html代码)
	p = $('<p class="c1">我是段落5</p>') 
	div = $("<div class='c2'><p>苹果</p><span>×</span></div>")
		
	//2)添加节点
	//节点1是节点2的父亲。
	//a. 节点1.append(节点2)====在节点1的最后添加节点2。
	//b. 节点1.prepend(节点2)====在节点1的最前面添加节点2。
	//节点1和节点2是兄弟关系
	//c. 节点1.before(节点2)====将节点2放在节点1的前面
	//d. 节点1.after(节点2)====将节点2放在节点1的后面
	$('body').append(div)
	$('body').prepend(p)
	$('#div2').before($('<img src="img/car.png" />'))
			
	//3)删除节点:节点.remove()
	$('#div1').remove()
</script>

（四）节点属性和节点内容

获取和修改标签内容
获取：标签.text()
修改：标签.text(新的数据)
标签.html(新的数据)
普通的属性修改和获取
获取：标签.attr(属性名)
修改：标签.attr(新的属性名)
value属性

<!--3.节点属性和节点内容-->
<script type="text/javascript">
	//1)获取和修改标签内容
	result = $('#a1').text()
	console.log(result)
	//$('#a1').text('京东')
	$('#a1').html('<span>京东</span>')
			
	//2)普通的属性修改和获取
	res = $('#a1').attr('href')
	console.log(res)
	$('#a1').attr('href', 'https://www.jd.com')
			
	//value属性
	res = $('input').val()
	console.log(res)
	$('input').val('李四')
</script>

三、jQuery事件绑定

事件跟js里的一样

（一）直接绑定

<button class="c1">按钮1</button>
<button class="c1">按钮2</button>
<button class="c1">按钮3</button>
<button class="c1">按钮4</button>
<script type="text/javascript">
    $('.c1').on('click', function(){
        alert('你好！' + this.innerText)
    })
</script>

（二）间接绑定

通过父标签给指定的子标签绑定事件

标签.on(事件名,子标签选择器,函数)

当有新增子标签，所有的都可以关联事件。

<button class="c1">按钮1</button>
<button class="c1">按钮2</button>
<button class="c1">按钮3</button>
<button class="c1">按钮4</button>
<script type="text/javascript">
    $('body').on('click', '.c1', function(){
		alert('你好！' + this.innerText)
	})
</script>