jQuery常用函数

最新推荐文章于 2022-05-14 21:37:10 发布

迷亭君

最新推荐文章于 2022-05-14 21:37:10 发布

阅读量1.2k

点赞数 2

分类专栏： ajax+JQuery+Vue 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49044908/article/details/121281089

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery常用函数

第一组,改变dom对象属性的方法

val (比较常用)
操作数组中的DOM对象的value属性
$(选择器).val() : 无参形式代表读取数组中第一个dom对象的value属性
$(选择器).val(值) : 有参形式调用代表将数组对象中所有的dom对象的value属性统一赋值
text
操作数组中所有dom对象的文字显示内容属性(类似js中的innertext)
$(选择器).text() : 无参形式调用,读取数组中所有dom对象的文字显示内容,将得到的内容拼接成一个字符串返回(忽略标签)
$(选择器).text(值) : 有参数方式,对数组中所有dom对象的文字显示内容进行统一赋值
attr
对val, text之外的其他属性操作
$(选择器).attr(“属性名”) : 获取dom数组的第一个对象的属性值
$(选择器).attr(“属性名”, “属性值”); 对数组中所有的dom对象的属性值设置为新值

第二组,特殊方法

remove
语法 : $(选择器).remove()
将数组中所有dom对象及其子对象一并删除
empty
语法 : $(选择器).empty()
将数组中所有dom对象的子对象删除
append (比较常用)
语法 : $(选择器).append("<标签>我动态添加的新标签</标签>")
为数组中的所有dom对象添加子对象
html
语法 : $(选择器).html() 无参调用方法,获取dom对象数组中第一个匹配元素的文本值(innerHTML,有标签就显示)
语法 : $(选择器).html(值) 有参数调用,用于设置dom数组中所有元素的内容
设置或返回被选中元素的内容(innerHTML)
each (比较常用)
each是对数组,json和dom数组的遍历,对json中的每一个成员或者数组中的每个元素都会调用一次函数
如:

	var arr = [1, 2, 3]; // 数组
	var json = {"name":"张三", "age":20}; // JSON
	var obj = $(":text"); // dom数组

语法 : $.each( 要遍历的对象, function( index, element) {处理程序})
$相当于java中的一个类名,each相当于一个静态方法,静态方法的调用可以使用类名.方法的方式调用
处理函数 function(index, element);
index : 循环的索引
element : 数组中的成员
当处理json时,这个函数可以看成 function(key, value)
key : json的属性
value : json属性对应的方法
例子:

	// 循环普通数组
	var arr = [1, 2, 3];
	$.each(arr, function (index, element) {
		alert("数组第" + index + "号元素的值为" + element);
	})
	
	// 处理json
	var json = {"name" : "张三", "age" : 20};
	$.each(json, function (key, value) {
		alert("key = " + key + " ,value = " + value) // 一共打印两次,因为json有两个key,value对
	})

	// 处理dom数组
	var domArray = $(":text"); // dom数组
	$.each(domArray, function (index, element) {
		// 需要注意,domArray实际上是jQuery数组
		// 但是在foreach循环中取出它的元素时可能使用的是[index]或者get(index)的方式
		// 从而使jQuery对象转换为js中的dom对象,所以这里使用element.value是正确的
		// 如果使用element.val()就错误了
		alert("index = " + index + " , element = " + element.value);
	})

语法 : jQuery对象.each(function( index, element) {处理程序})
和上面大体相同,这里只能是jQuery对象
例子如下:

	// 循环jQuery对象
	$(":text").each(function (index, element) {
		alert("index = " + index + " , element = " + element.value);
	})

下面是包含了上述所有方法的例子,有兴趣的朋友可以参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                // 使用remove删除所有dom对象
                $("select").remove();
            })

            $("#btn2").click(function () {
                // 使用empty删除dom元素的子元素
                $("select:eq(0)").empty();
            })

            $("#btn3").click(function () {
                // 增减按钮
                $("#father").append("<input type='button' value='我是增加的按钮'>");
            })

            $("#btn4").click(function () {
                // 使用html()函数,获取数组中第一个dom对象的文本值
                alert($("span").html());
            })

            $("#btn5").click(function () {
                // 使用html(参数)设置dom对象的文本值
                $("span").html("我是<b>新的数据</b>");
            })

            $("#btn6").click(function () {
                // 循环普通数组,非dom数组
                var arr = [1, 2, 3];
                $.each(arr, function (index, element) {
                    alert("数组第" + index + "号元素的值为" + element);
                })
            })

            $("#btn7").click(function () {
                // 循环json
                var json = {"name" : "张三", "age" : 20};
                $.each(json, function (key, value) {
                    alert("key = " + key + " ,value = " + value)
                })
            })

            $("#btn8").click(function () {
                // 循环dom数组
                var domArray = $(":text"); // dom数组
                $.each(domArray, function (index, element) {
                    alert("index = " + index + " , element = " + element.value);
                })
            })

            $("#btn9").click(function () {
                // 循环jQuery对象
                $(":text").each(function (index, element) {
                    alert("index = " + index + " , element = " + element.value);
                })
            })
        })
    </script>
</head>
<body>
    <input type="text" value="100" /> <br/>
    <input type="text" value="200" /> <br/>
    <input type="text" value="300" /> <br/>
    <input type="text" value="400" /> <br/>
    <select>
        <option value="老虎">老虎</option>
        <option value="狮子">狮子</option>
        <option value="豹子">豹子</option>
    </select>
    <br/>
    <select>
        <option value="美洲">美洲</option>
        <option value="亚洲">亚洲</option>
        <option value="欧洲">欧洲</option>
    </select>
    <br/>
    <div id="father">我是div-father</div>
    <br/>
    <span>我是mysql<b>数据库</b></span>
    <br/>
    <span>我是jdbc</span>
    <br/>
    <input type="button" id="btn1" value="使用remove删除父及其子对象" />
    <br/>
    <input type="button" id="btn2" value="使用empty删除子对象" />
    <br/>
    <input type="button" id="btn3" value="使用append增加dom对象" />
    <br/>
    <input type="button" id="btn4" value="获取第一个dom的文本值" />
    <br/>
    <input type="button" id="btn5" value="设置所有dom的文本值" />
    <br/>
    <input type="button" id="btn6" value="循环普通数组" />
    <br/>
    <input type="button" id="btn7" value="循环json" />
    <br/>
    <input type="button" id="btn8" value="循环dom数组" />
    <br/>
    <input type="button" id="btn9" value="循环jQuery对象" />
</body>
</html>

迷亭君

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用函数

jQuery常用函数第一组,改变dom对象属性的方法val操作数组中的DOM对象的value属性$(选择器).val() : 无参形式代表读取数组中第一个dom对象的value属性$(选择器).val(值) : 有参形式调用代表将数组对象中所有的dom对象的value属性统一赋值text操作数组中所有dom对象的文字显示内容属性(类似js中的innertext)$(选择器).text() : 无参形式调用,读取数组中所有dom对象的文字显示内容,将得到的内容拼接成一个字符串返回$(选择器
复制链接

扫一扫