JQuery的操作属性_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-3

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		.aa{color: red;}
		.bb{font-size: 30px};
	</style>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function(){
		$('b').addClass('aa bb');//该方法向被选中元素添加一个或者多个类，多个类用空格隔开
		$('b').removeClass('aa bb');//该方法向被选中元素移除一个或者多各类，多个类用空格隔开
		$('button[id=dk]').click(function(){
			$('img').attr('src','images/1.jpg');
		})//该方法按下打开图片按钮设置选中元素img的src属性值为images/1.jpg
		$('button[id=gb]').click(function(){
			$('img').removeAttr('src','images/1.jpg');
		})//该方法按下关闭图片按钮移除选中元素img的src属性值
		alert($('p').hasClass('php'));//用弹窗的方式验证检查p标签被选中的元素id是否包含指定值php
		$('button[id=qh]').click(function(){
			$('span,b,p').toggleClass('aa bb');
		})//该方法按下切换按钮进行添加\删除类的切换操作设置内容
		$('b').text('修改后的内容：您好，欢迎来到');
		//该方法返回设置被选中的元素的文本内容
		$('span').html('<h1>hello world!</h1>');
		//该方法返回设置被选中的元素内容(可以修改包括html标签)
		$('input').val('修改后'); 
		//该方法返回设置被选元素的值
})
</script>

<span>大家好</span>
<b>欢迎来到</b>
<p class="php">PHP中文网</p>
<img src="">
<button id="dk">打开图片</button>
<button id="gb">关闭图片</button>
<button id="qh">切换</button>
<input type="text" name="" value="初始">
</body>
</html>

$('b').addClass('aa bb');

该方法向被选中元素添加一个或者多个类，多个类用空格隔开

$('b').removeClass('aa bb');

该方法向被选中元素移除一个或者多各类，多个类用空格隔开

$('button[id=dk]').click(function(){
    $('img').attr('src','images/1.jpg');
})

该方法按下打开图片按钮设置选中元素img的src属性值为images/1.jpg

$('button[id=gb]').click(function(){
    $('img').removeAttr('src','images/1.jpg');
})

该方法按下关闭图片按钮移除选中元素img的src属性值

alert($('p').hasClass('php'));

用弹窗的方式验证检查p标签被选中的元素id是否包含指定值php

$('button[id=qh]').click(function(){
    $('span,b,p').toggleClass('aa bb');
})

该方法按下切换按钮进行添加\删除类的切换操作设置内容

$('b').text('修改后的内容：您好，欢迎来到');

该方法返回设置被选中的元素的文本内容

$('span').html('<h1>hello world!</h1>');

该方法返回设置被选中的元素内容(可以修改包括html标签)

$('input').val('修改后');

该方法返回设置被选元素的值

JQuery的操作属性

热门词条