首页 > 代码库 > jquery和js操作,【包含jquery挂事件】

jquery和js操作,【包含jquery挂事件】

JS
根据ID取元素,取到的是具体的元素
  var a = document.getElementById("p1");
根据CLASS取
  var a = document.getElementsByClassName("aa");
根据标签名取
  var a = document.getElementsByTagName("div");
根据name取
  var a = document.getElementsByName("cc");
  alert(a); 

操作元素
操作内容
  非表单元素
    a.innerText = "hello";
    a.innerHTML = "<span style=‘color:red‘>world</span>";
  表单元素
    a.value = "http://www.mamicode.com/hello";
  操作属性
    a.setAttribute("bs","1");          bs为自己定义,两个参数为设置 一个参数是获取
    a.getAttribute("bs");
    a.removeAttribute("bs");
  操作样式
    a.style.color = red;

  批量操作DIV隐藏
    var a = document.getElementsByClassName("aa");

        for(var i=0;i<a.length;i++)
        {
        a[i].style.display = "none";
        }




Jquery
  根据ID找元素,取到的是JQUERY对象
    var b = $("#a1");

  根据CLASS取
    var b = $(".aa");

  根据标签名取
    var b = $("div");

  根据属性筛选
    var b = $("[name=aa]");

  操作元素
  操作内容
  非表单元素
    b.text();
    b.html();
  表单元素
    b.val();
  操作属性
  b.attr("bs","1");
  b.attr("bs");
  b.removeAttr("bs");
  操作样式
  alert(b.css("color"));
  b.css("font-size","50px");

  alert(b[0]); 取jquery对象用.eq()   取元素本身用[]


  批量操作多个元素
  $(".aa").css("display","none");

 


 


 

 

jquery挂事件

 jquery可以加事件也可以挂事件,因为加上的事件改变比较麻烦,所以引入了挂事件,挂事件添加,改变相对简单

  <input type="text" id="p1" />
  <input type="button" id="b1" value="http://www.mamicode.com/挂事件" />
  <input type="button" id="b2" value="http://www.mamicode.com/移除事件" />
  <script type="text/javascript"  Jquery加事件

  页面加载完成
  $(document).ready(function(e) {

  给a1加点击
  $("#a1").click(function(){
  alert(‘aa‘);
  })
  给class为aa的所有元素加事件
  $(".aa").click(function(){
  alert($(this).attr("bs"));
  $(".aa").css("background-color","#39F");
  $(this).css("background-color","red");
  })

  挂事件
  $("#b1").click(function(){

    $("#a1").bind("click",function(){

    alert("我是挂上的事件");

    });

  })
  $("#b2").click(function(){

    $("#a1").unbind("click");
    })
  });
</script>

jquery和js操作,【包含jquery挂事件】