jQuery学习笔记

1、jQuery是一个js库，提供一些方法和属性，一定要引入它的js库。引入它和图片的路径一定要是绝对的，http://...

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="checkInput.js"></script>//jQuery引用要加在js文件之前

2、jQuery能干什么？

      （1）有良好的兼容性

         （2）方便获取dom对象

           （3）方便动态生成dom对象，对dom进行替换、更新

               （4）方便注册及使用事件

                   （5）很容易可以实现各种特效

                        （6）提供了丰富的异步提交方法，实现无刷新技术

3、jQuery核心对象介绍

核心对象就是jQuery--->$

$(函数)   ：  dom加载完毕后，我要干的事情。

$(function (){

    alert("张三丰");

});

$(字符串) ：    选择dom对象，返回的是jQuery对象。jQuery对象是没有办法用dom对象的方法和属性的。

$(function(){

    $("#div1").html("杨玉环");

});

<div id="div1" style="background-color:pink;">

    张三丰

</div>

$(dom对象) ：将dom对象加工为jQuery对象

                     var  $_obj=$(domobj);

4、jQuery对象->dom对象

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

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

或者

var domobj=$("选择器字符串").get(0);//一个dom

var domobjs=$("选择器字符串").get();//dom数组

$(function(){

    $("#div1")[0].innerHTML="杨玉环";

});

5、xxxx.min.js   发布版

       XXXX.js       开发版

      XXXX.doc.js            文档版（vs下进行文档提示）

      XXXX.mobile.js         移动版

6、选择器

#id  ：根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义。

element：指向 DOM 节点的标签名。根据给定的元素名匹配所有元素。

.class：一个元素可以有多个类，只要有一个符合就能被匹配到。

           <div class="myClass">div class="myClass"</div>
           <span class="myClass">span class="myClass"</span> 

          $(".myClass");

*      ：找到每一个元素

返回值:Array<Element(s)>selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。

                                                                                                      你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

ancestor descendant   ：在给定的祖先元素下匹配所有的后代元素。$("form input")   子孙...

parent > child   ： 在给定的父元素下匹配所有的子元素。$("form > input")                    子

prev + next    ： 匹配所有紧接在 prev 元素后的 next 元素

prev ~ siblings   ：匹配 prev 元素之后的所有 siblings 元素

first()   ： 获取匹配的第一个元素​     $('li').first()

last()  ：获取最后一个元素

:not     ： 去除所有与给定选择器匹配的元素      $("input:not(:checked)")

:even  ： 匹配所有索引值为偶数的元素，从 0 开始计数

:odd    ： 匹配所有索引值为奇数的元素，从 0 开始计数

:eq      ： 匹配一个给定索引值的元素。从 0 开始计数

:gt       ： 匹配所有大于给定索引值的元素。从 0 开始计数

:lt        ： 匹配所有小于给定索引值的元素。从 0 开始计数

:contains   ： 匹配包含给定文本的元素

:empty       ： 匹配所有不包含子元素或者文本的空元素

:has           ： 匹配含有选择器所匹配的元素的元素             $("div:has(p)").addClass("test");

:parent       ： 匹配含有子元素或者文本的元素                  $("td:parent")

7、设置css样式

$("ul li:lt(1)").css({color:"blue",backgroundColor:"pink"});

8、属性

[attribute]   ： 匹配包含给定属性的元素。  $("div[id]")

[attribute=value]   ： 匹配给定的属性是某个特定值的元素    $("input[name='newsletter']").attr("checked", true);

[attribute!=value]   ： 匹配所有不含有指定的属性，或者属性不等于特定值的元素。$("input[name!='newsletter']").attr("checked", true);

[attribute^=value]   ： 匹配给定的属性是以某些值开始的元素

[attribute$=value]   ： 匹配给定的属性是以某些值结尾的元素

[attribute*=value]    ：匹配给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]   ： $("input[id][name$='man']")

:nth-child     ： 匹配其父元素下的第N个子或奇偶元素。要匹配元素的序号，从1开始

                         ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

:first-child    ： 匹配第一个子元素                $("ul li:first-child")  

9、表单

:input       ：匹配所有 input, textarea, select 和 button 元素

:text          ：匹配所有的单行文本框     $(":text")

:password     ： 匹配所有密码框

:radio        ： 匹配所有单选按钮

:checkbox     ：匹配所有复选框

:submit           ：匹配所有提交按钮

:image           ：匹配所有图像域

:reset

:button

:file

:hidden

10、表单对象属性

:enabled    ： 匹配所有可用元素              $("input:enabled")

:disabled    ：匹配所有不可用元素

:checked     ： 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)    $("input:checked")

:selected      ： 匹配所有选中的option元素         $("select option:selected")          

11、

$(function(){

    $("#btnOK").click(function(){

         $("input[type='text']").each(function(){

            var validate=$(this).attr("validate");

            eval("var obj="+validate);

            if(obj.required==true){

                  if($(this).val().length==0){

                        alert("该字段为必输字段");

                        return false;

                  }

                  if($(this).val().length>obj.maxlength){

                         alert("最大长度不能超过"+obj.maxlength);

                  }

            }

        });

    });

});

<input type="text" validate="{maxlength:5,required:true,isNumric:true}">用户名

<input type="text" validate="{maxlength:10,required:true}"昵称//注意，是逗号

<input type="button" id="btnOK" value="验证">

12、利用attr为属性赋值/得值  ---》自定义属性的
    备注：prop ---》 预定义属性的

input  data="豆浆"   attr

13、练习

（1）自己封装一个JS，叫做checkInput.js
    里面有一个方法，方法叫做validate
    这个方法可以实现根据input标签的validate属性进行验证。
    maxlength
    minlength
    required      true/false
    isDate   true/false
    isNumeric  true/false 是否为两位小数
    自己进行测试

（2）  菜单树的实现

（3） 模糊查询，分页（客户端分页）

（4）  点击清除按钮，可以清除页面上所有的值

练习题答案下载地址：https://download.youkuaiyun.com/download/level_tiller/11387651