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
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。