$ (“选择器”).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.