jquery快速入门(三)常用函数

最新推荐文章于 2021-09-10 18:05:49 发布

kyyius

最新推荐文章于 2021-09-10 18:05:49 发布

阅读量94

点赞数

文章标签： js javascript jquery html

本文链接：https://blog.csdn.net/kyyius/article/details/109782846

版权

$ (“选择器”).val() // 返回第一个匹配元素的 value 属性的值。
$ (“选择器”).val(x) // 有参数，设置所有的text的value为新值。

$ (“选择器”).text() // 无参，获取对象的文本值，并链接成一个字符串.
$ (“选择器”).text(x) // 有参，将所有对象的文本值变成x

$ (“选择器”).attr() // 无参，读取指定属性的值
$ (“选择器”).attr(‘x’,‘y’) // 将x属性的值设置为y

$ (“选择器”).remove() // 将数组中所有dom对象及其子对象一并删除

$ (“选择器”).empty() // 将数组中所有dom对象的子对象删除

$ (“选择器”).append() // 为数组中所有dom对象添加子对象

$ (“选择器”).html() //获取第一个dom对象的文本值innerhtml
$ (“选择器”).html(x) //设置对象的文本值（可以使用标签）

each():
可以对数组，json，dom数组循环处理，数组，json中每个成员都会调用因此处理函数
语法1 ：$.each(循环内容，处理函数)：表示使用jq的each，循环数组，每个数组成员，都会执行还没的处理函数一次

$相当于java的一个类名
each就是类中的静态方法

语法2：jq对象.each(function(i,n){})

$ (“选择器”).height() // 无参数，获得当前控件的高度
$ (“选择器”).height(x) // 有参数，设置当前控件的高度

<!-->demo1<-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<input type="text" value="1">
		<input type="text" value="2">
		<input type="text" value="3">
		
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		
		<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=209946149,367802997&fm=26&gp=0.jpg" >
		
		<input type="button" value="1" id="btn1">
		<input type="button" value="2" id="btn2">
		<input type="button" value="3" id="btn3">
		<input type="button" value="4" id="btn4">
		<input type="button" value="5" id="btn5">
		<input type="button" value="6" id="btn6">
		<script type="text/javascript">
			$(function(){
				$('#btn1').click(function(){
					// val()无参数获取第一个对象的value属性值
					console.log($(':text').val())
				});
				$('#btn2').click(function(){
					// 有参数，设置所有的text的value为新值
					$(':text').val('4')
				});
				$('#btn3').click(function(){
					// text()无参，获取对象的文本值，并链接成一个字符串
					console.log($('div').text())
				});
				$('#btn4').click(function(){
					// 有参数，给所有div设置新值
					$('div').text('hello')
				});
				$('#btn5').click(function(){
					// 读取指定属性的值
					console.log($('img').attr('src'))
				});
				$('#btn6').click(function(){
					// 设置指定的属性值
					$('img').attr('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605712799053&di=d2d0c4ab53fcd8d588e0b19a3c566e4b&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F12%2F093151oaan76rs4hq9n3z9.jpg')
				});
				
			})
		</script>
	</body>
</html>

<!-->demo2<-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
		<select name="" id="">
			<option value="">1</option>
			<option value="">2</option>
			<option value="">3</option>
		</select>
		<select name="" id="">
			<option value="">4</option>
			<option value="">5</option>
			<option value="">6</option>
		</select>
		<div id="father">father</div>
		<span>mysql <b>database</b></span>
		<span>jdbc</span>
		<input type="button" value="1" id="btn1">
		<input type="button" value="2" id="btn2">
		<input type="button" value="3" id="btn3">
		<input type="button" value="4" id="btn4">
		<input type="button" value="5" id="btn5">
		<input type="button" value="6" id="btn6">
		<input type="button" value="7" id="btn7">
		<input type="button" value="8" id="btn8">
		<input type="button" value="9" id="btn9">
		<script type="text/javascript">
			$(function(){
				$('#btn1').click(function(){
					// 删除父子所有的dom对象
					$('select').remove()
				})
			    $('#btn2').click(function(){
					// 使用empty，删除子dom对象
					$('select').empty()
				})
				$('#btn3').click(function(){
					// 使用append.增加dom对象
					// $('#father').append("<input type='button' value='我是增加'/>")
					$('#father').append("<table border='1'> <tr><td>col-1</td><td>col-2</td></tr></table>")
				})
				$('#btn4').click(function(){
					// 使用html()函数获取数组中第一个dom对象的文本值innerhtml
					console.log($('span').html())
				})
				$('#btn5').click(function(){
					// 使用html(有参数):设置dom对象的文本值
					$('span').html('新<b>123</b>')
				})
				$('#btn6').click(function(){
					// 循环普通数组，非dom数组,i是循环变量(类似for里面的i)，n是内容
					let arr = [1,2,3]
					$.each(arr,function(i,n){
						console.log(i,n)
					})
					
				})
				$('#btn7').click(function(){
					// 循环json
					let json = {"name": "zs", "age":22}
					$.each(json,function(i,n){
						console.log(i,n)
					})
				})
				$('#btn8').click(function(){
					let domArr = $(':button')
					$.each(domArr,function(i,n){
						console.log(n.value)
					})
				})
				$('#btn9').click(function(){
					// 循环jq对象
					$(':button').each(function(i,n){
						console.log(n.value)
					})
				})
			})
		</script>
	</body>
</html>

链接: jquery快速入门（完结）请求ajax.

kyyius

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery快速入门(三)常用函数

$ (“选择器”).val() // 返回第一个匹配元素的 value 属性的值。$ (“选择器”).val(x) // 有参数，设置所有的text的value为新值。$ (“选择器”).text() // 无参，获取对象的文本值，并链接成一个字符串.$ (“选择器”).text(x) // 有参，将所有对象的文本值变成x$ (“选择器”).attr() // 无参，读取指定属性的值$ (“选择器”).attr(‘x’,‘y’) // 将x属性的值设置为y$ (“选择器”).remove() /
复制链接

扫一扫