Jquery方法的应用

<body>

<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />

</body>

书写位置在JS代码中

<script type="text/javascript">

书写格式:

$(document).ready(function(e) {

  //JS方式
  //1.根据ID取元素,DOM对象
  //var div = document.getElementById("one");
  //2.根据class取元素
  //var div = document.getElementsByClassName("test");
  //3.根据name取
  //var bd = document.getElementsByName("uid");
  //4.根据标签名取
  //var div = document.getElementsByTagName("div");

  //操作内容
  //1.非表单元素
  //alert(div.innerText);
  //div.innerText = "aaaa";
  //div.innerHTML;
  //2.表单元素
  //div.value

  //操作属性
  //div.setAttribute("","");
  //div.removeAttribute("");
  //div.getAttribute("");

  //操作样式
  //div.style.backgroundColor = "red";
  //alert(div.style.color);只能获取内联样式

  //在数组里面如果要取DOM对象使用索引的方式,如果要取Jquery对象使用eq()

  //JQUERY方式
  //1.根据ID取元素,Jquery对象
  var div = $("#one");
  //2.根据class取
  //var div = $(".test");
  //3.根据属性取
  //var bd = $("[bs='aa']");
  //4.根据标签名取
  //var div = $("div");
  //5.组合选取
  //var div = $("div span");

  //操作内容
  //1.非表单元素
  //alert(div.text());
  //div.text("aaaa");  ——文本
  //div.html();     —— html代码
  //2.表单元素
  //div.val("aaa");

  //操作属性
  //div.attr("属性名","属性值");  ——添加、设置属性
  //div.removeAttr("属性名");  ——移除属性
  //div.attr("属性名");   ——获取属性

  //操作样式
  //div.css("样式名","样式值");    ——添加样式
  //div.css("样式名");   ——获取样式

  //操作元素
  //var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";

  //div.append(str); //追加元素
  //$("#a").remove(); //移除某个元素

  $(".test").click(function(){
  $(this).text();
  })

    绑定事件:
  $(".test").bind("click",function(){

    $(this).text();

  });
    取消绑定:
  $("#btn").click(function(){

    $(".test").unbind("click");

  });

绑定事件:
  $("#add").click(function(){

    $(".test").bind("click",function(){

      $(this).text();

    });
  });

});

</script>

上一篇:判断0-N之间出现1的次数


下一篇:ASP.NET MVC 学习之路-3