jQuery

笔记

1.是一个JS库，提供一些方法和属性。所以先引入JS库，路径一定要是绝对路径，HTTP开始的
2. jQuery能干什么： [1] 有良好的兼容性 [2] 方便获取DOM对象 [3] .方便进行动态DOM的生成，对DOM进行替换，追加。 [4] 方便注册及使用时间 [5] .很容易实现各种特效6.提供异步提交方法，实现无刷新技术。
3. jQuery核心对象的介绍：核心对象就是jQuery----->$

• $用法：

  • $(函数)：dom加载完毕之后，要干什么。

    $(function(){
    alert("张三丰");
    });
    

  • $(字符串)：选择dom对象，返回的是jQuery对象。意味着只能用jQuery的方法。jQuery对象无法用dom对象的方法和属性的。

    $(function(){
    	$("#div1").html("杨玉环");//不能用innerHTML()方法
    });
    

  • $(dom对象):将dom对象加工为jQuery对象

    var $_obj = $(domObj);
    $_obj.html("杨玉环");
    

• jQuery转换为dom对象的方法

  凡是以选择器选择出来的jQuery对象都是数组

  var domObj=$("选择器字符串")[0];
  

  var domObj=$("选择器字符串").get(0);
  

  var domObj=$("选择器字符串").get();//所有的都转
  

4.xxx.min.js 发布版 xxxx.jx开发板 xxxx.doc.js文档版 xxxx.mobile.js移动版
5.学习要点：

• 设置css样式 范例如下：

  $("#div1").css("backdroundColor","pink");
  

  $("#div1").css({color:"blue",backgroundColor:"pink"});
  

• 选择器

  • ","或者选择器|并集选择器

    $("div,span,p");
    

  • 后代选择器（子代，孙代…）

    $("form input");
    

    描述:
    找到表单中所有的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    

    jQuery 代码:

    $("form input")
    

    结果:

    [ <input name="name" />, <input name="newsletter" /> ]
    

  • 子代选择器(只是子代)

    $("form>input");
    

    描述:
    匹配表单中所有的子级input元素。

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    

    jQuery 代码:

    $("form > input")
    

    结果:

    [ <input name="name" /> ]
    

  • 兄弟选择器(+：紧邻着的弟弟，不找哥哥。“~”：所有的弟弟)

    $("form+input");
    

    $("form~input");
    

    描述:
    匹配所有跟在 label 后面的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    

    jQuery 代码:

    $("label + input")
    

    结果:

    [ <input name="name" />, <input name="newsletter" /> ]
    

    描述:
    找到所有与表单同辈的 input 元素

    HTML 代码:

    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    

    jQuery 代码:

    $("form ~ input")
    

    结果:

    [ <input name="none" /> ]
    

  • :first:获取第一个元素

  • :not:去除所有与给定选择器匹配的元素

  • :even偶数时

  • 效果：显示隐藏

  • 利用attr为属性赋值

  • String转对象

    eval("var obj = "+validate);
    

    var validate= $("input[type="text"]").attr("validate");
    eval("var obj = "+validate);
    //必填
    if(obj.required==true){
    	if($("input[type='text']").val.length==0){
    		alert("必输字段");
    		return false;
    	}
    }
    //长度
    if($("input[type='text']").val.length>obj.maxlength){
    	alert("长度不能超过"+obj.maxlength);
    	return false;
    }
    ........
    <input type="text" validate="{maxlength:10,required:true}" />最大长度为5，必填
    

    <input type="text" data="昵称"  validate="{maxlength:10,required:true,minlength:3}" />昵称
    //JSON
    //本质：本质上是一个字符串，
    //作用：JSON是JS对象的字符串表示法，用来表示JS的一个对象
    //表示法：花括号表示对象，方括号表示数组，逗号分隔数据，键值对表示数据
    

• attr:自定义属性 prop:预定义属性