jquery的dom-操作函数

2020-10-20 10:43发布

jquery的dom-属性和文本

jquery对象可以调用多种函数,操作选择器返回的jquery对象

  • (1)text属性-text()

  • (2)html属性-html()

  • (3)value属性-val() ****

<input id="myinput" type="text" name="username" value="张三" /><br /><div id="mydiv">标题标签</div><div id="mydiv"><p><a href="#">标题标签</a></p></div>123<script type="text/javascript">
		alert($("#myinput").val());
		//$("#myinput").val("李四");  //setAttribute("value","李四“)
		alert($("#mydiv").html());  //获取div中所有的元素体  innerHtml
		alert($("#mydiv").text());  //获取div最内部的文本

		$("#mydiv").html("<img src='a.jpg'/>");  //设置div的元素体内容

	</script>12345678910111213

jquery的dom-操作attr prop ***

标签体

  • (1) attr 与 prop 都是属性的意思

  • (2)区别
    attr与prop是以1.6为界限

  • checked 和 selected 使用prop获取
    其他使用attr获取

在这里插入图片描述

<script type="text/javascript">

		/*

		attr与prop是以1.6为界限
	    checked 和 selected 使用prop获取
	    其他使用attr获取
		 */
	
		//获取北京节点的name属性值
		alert($("#bj").attr("name"));
		// alert($("#tj").prop("name"));  //不能用
		//设置北京节点的name属性的值为dabeijing
		 $("#bj").attr("name","dabeijing");
		//新增北京节点的discription属性 属性值是didu
         $("#bj").attr("discription","didu");
		//删除北京节点的name属性并检验name属性是否存在
		$("#bj").removeAttr("name");

		//获得hobby的的选中状态
		alert($("#hobby").prop("checked"));  //true, false
        $("#hobby").prop("checked",true);
	</script>1234567891011121314151617181920212223

jquery的dom-操作class

(1)class属性
在这里插入图片描述

<script type="text/javascript">
	
		 //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
		//点击该按钮,给id为one的div添加一个class属性,值为second
		 $("#b1").click(function () {
             $("#one").attr("class","second");  //将原来class的值覆盖
         });
		 //<input type="button" value=" addClass"  id="b2"/>
         $("#b2").click(function () {
             $("#one").addClass("second");   //在原class的基础上新添加值
         });
         //<input type="button" value="removeClass"  id="b3"/>  删除class属性
         $("#b3").click(function () {
             $("#one").removeClass("second");   //在原class的基础上新添加值
         });
		 //<input type="button" value=" 切换样式"  id="b4"/>
         $("#b4").click(function () {
             $("#one").toggleClass("second");   //如果有second,则删除,没有则添加
         });
		 //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
         $("#b5").click(function () {
             alert($("#one").css("backgroundColor"));
         });
 		 // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
         $("#b6").click(function () {
             $("#one").css("backgroundColor","green");
         });
		setInterval(function () {
            $("#one").toggleClass("second");
        },300);
	</script>12345678910111213141516171819202122232425262728293031

jquery的dom-操作其他

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<script type="text/javascript">

		/**将反恐放置到city的后面*/
        $("#city").append($("#fk"));
        // $("#city").append($("#fk").clone());
        //
        //
        // // /**将反恐放置到city的最前面*/
        //  $("#city").prepend($("#fk"));
        // //将反恐插入到天津后面
        //  $("#tj").after($("#fk"));  //天津的后边是反恐

        // //将反恐插入到天津前面
        //   $("#tj").before($("#fk"));  //天津的前边是反恐

        // //将反恐插入到天津前面
       	//    $("#tj").insertAfter($("#fk"));
		
	</script>


作者:水巷石子

链接:https://blog.csdn.net/qq_37924905/article/details/108658408

来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。