jquery和js操作，包含jquery挂事件

Posted 2020-09-18 __逆光

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 = "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="挂事件" />
　　<input type="button" id="b2" value="移除事件" />
　　<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>