jQuery-Day02

最新推荐文章于 2024-06-10 18:06:10 发布

Naiewiew

最新推荐文章于 2024-06-10 18:06:10 发布

阅读量77

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weiweianx/article/details/113677339

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了jQuery中用于处理DOM元素的各种方法，包括获取和设置固有属性与自定义属性、操作元素内容、遍历元素、创建及操作DOM结构。通过实例展示了如何使用$.each进行迭代，以及如何动态改变元素样式、内容和位置。此外，还涉及到了表单值的获取、元素的添加与移除等实用技巧。

摘要由CSDN通过智能技术生成

属性操作

ele.prop(“属性名”)；
获取固有属性 ;
ele.prop(“属性名”,“属性值”);
修改固有属性值

	<a href="http://www.itcast.cn" title="也是">1</a>
    <input type="checkbox" name="" id="" checked>
    <script>
        $(function(){
        	//功能等同 原生getAttribute
            console.log($('a').prop("href"));
            $('a').prop("href","http://www.baidu.com");
            $('input').change(function(){
                console.log($(this).prop("checked"));
            })
        })
    </script>

ele.attr(“属性名”)；
获取自定义属性 ;
ele.attr(“属性名”,“属性值”);
修改自定义属性值

	<div id="one" data-index="1"></div>
    <script>
        $(function(){
        	//功能等同 原生setAttribute
            $("div").attr("data-index");
            $("div").attr("data-index",3);
        })
    </script>

ele.data(“uname”);
ele.data(“uname”,“Amy”);
data()为数据缓存，不显示再Dom里；如果自定义属性为data-index，使用data()时可省略’data-"。

内容文本值

普通元素内容 ele.html()

<div>
	123
	<span>456</span>
</div>
<script>
	$(function(){
		//类似原生innerHTML()
		console.log($("div").html())
		//获取的值为 123<span>456</span>
		$("div").html("890");
		//div中则只有890，没有span了
	})
</script>

普通元素文本内容 ele.text()

<div>
	123
	<span>456</span>
</div>
<script>
	$(function(){
		//类似原生innerHTML()
		console.log($("div").text())
		//获取的值为 123 456
		$("div").text("890");
		//div中则只有890，没有span了
	})
</script>

获取表单值 ele.val();
返回指定祖先元素 ele.parents(“选择器”)；
保留两位小数 num.toFixed(2);

元素操作

遍历元素

ele.each(function(index,domEle){…});
$.each(ele,function(index,domEle){…})

	<div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        $(function(){
            var arr = ["red","green","blue"];
            var sum = 0;
            $("div").each(function(index,domEle){
                $(domEle).css("color",arr[index]);
                sum = sum + parseInt($(domEle).text());
            })
            console.log(sum);
            $.each({
                name:"andy",
                age:20
            },function(i,ele){
                console.log(i,ele);
            })
        })
    </script>

创建元素

    <ul>
        <li>1</li>
    </ul>
    <div class="box">原先的盒子</div>
    <script>
        $(function(){
        	//创建元素
            var li = $("<li>后来</li>");
            //放在后面
            $("ul").append(li);
            //放在前面
            $("ul").prepend(li);

            var small = $('<div class="small"><div>');
            $(".box").append(small);

            $(".box").after(small);
            $(".box").before(small);
			
			//自杀
			$(".box").remove();
			//删除子节点
			$(".box").empty();
			$(".box").html("");
        })
    </script>