jquery概述

来源:互联网 发布:js给font标签赋值 编辑:程序博客网 时间:2024/05/20 12:51
#jquery概述
      jquery是一款免费且开放源代码的javascript代码库,引入了全新的Dom选择器引擎
      同时提供Ui库组件
      jquery优点:
      1. 轻量级
      2. 强大的DOM选择器,简化javascript和ajax开打
      3. 解决不同浏览器带来的兼容器
      4. 提供UI组件,让页面开发更方便

###jquery对象和dom对象互换
     dom转为jquery:
      var obj =
      document.getElementById("div1");
        //dom对象转化为jquery
       var jq = $(obj);
       alert(jq.html());
     jquery转为dom:
       var jq = $("#div1");
       var obj = $(jq)[0];
       alert(obj.innerHTML);

###jquery 元素选择器
    按标记名称查找元素:
        dom:  var div1=document.getElementById("div1");
           div1.getElementsByTagName("label");
        jquery:  var msg = $("#div1 label");
              var msg =$("#div1").find("label")
    取得数据第几个元素,返回dom对象
        alert("$div1 label")[1].innerHTML);
    数组长度:
      alert($("#div1 label").size());
    遍历数组:
      $("#div1 label").each(function (index,data){

        index为循环变量,data为数组中的DOM元素
          //得到原始DOM对象
         alert(this.innerHTML);
})
###jquery元素设置
    设置、获得标签中的内容(相当于innerHMTL)
      $("#div1").html("<p>aaa</p>")//设置内容
      alert($("#div1").html());//获得内容
    设置、获得value值
      $("#userName").val("张三");//设置val值
      alert($("#userName").val());//获得value值
    显示、隐藏元素
      $("p").show("slow");//附加动画,显示元素
      $("p").hide("slow");''附加动画,隐藏元素

###jquery取消事件
      取消对象中所有事件
      $("p").unbind();
      取消对象所有的点击事件
      $("p").unbind('click');
      取消对象中某一个点击事件
      $("p").unbind('click',fun)


单选框和复选框判断是否选中:checked
列表框和下拉框判断是否选中:selected
0 0