0
点赞
收藏
分享

微信扫一扫

Day09JavaWeb【Jquery】jquery操作函数


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>

<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>

jquery的dom-操作attr prop ***

标签体

  • (1) attr 与 prop 都是属性的意思
  • (2)区别
    attr与prop是以1.6为界限
  • checked 和 selected 使用prop获取
    其他使用attr获取

Day09JavaWeb【Jquery】jquery操作函数_js

<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>

jquery的dom-操作class

(1)class属性

Day09JavaWeb【Jquery】jquery操作函数_jquery_02

<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>

jquery的dom-操作其他

Day09JavaWeb【Jquery】jquery操作函数_css_03


Day09JavaWeb【Jquery】jquery操作函数_javascript_04


Day09JavaWeb【Jquery】jquery操作函数_css_05

<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>


举报

相关推荐

0 条评论