jQuery使用详细入门

1.元素加载

    将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

• <script type="text/javascript">
•     $(document).ready(function(){
•         ......
•     });
• </script>
  

    可以简写为：

• <script type="text/javascript">
•     $(function(){
•         ......
•     });
• </script>
  

二、jQuery选择器1.jQuery选择器

    jQuery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

• $(document)           // 选择整个文档对象
• $('li')               // 选择所有的li元素
• $('#myId')            // 选择id为myId的网页元素
• $('.myClass')         // 选择class为myClass的元素
• $('input[name=first]') // 选择name属性等于first的input元素
• $('#ul1 li span')   // 选择id为为ul1元素下的所有li下的span元素
  

2.对选择集进行修饰过滤(类似CSS伪类)

• $('#ul1 li:first') // 选择id为ul1元素下的第一个li
• $('#ul1 lidd')   // 选择id为ul1元素下的li的奇数行
• $('#ul1 li:eq(2)') // 选择id为ul1元素下的第3个li
• $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
• $('#myForm :input') // 选择表单中的input元素
• $('div:visible')    //选择可见的div元素
  

3.对选择集进行函数过滤

• $('div').has('p');          // 选择包含p元素的div元素
• $('div').not('.myClass');   //选择class不等于myClass的div元素
• $('div').filter('.myClass'); //选择class等于myClass的div元素
• $('div').first();           //选择第1个div元素
• $('div').eq(5);             //选择第6个div元素
  

4.选择集转移

• $('div').prev('p');       //选择div元素前面的第一个p元素
• $('div').next('p');       //选择div元素后面的第一个p元素
• $('div').closest('form'); //选择离div最近的那个form父元素
• $('div').parent();        //选择div的父元素
• $('div').children();      //选择div的所有子元素
• $('div').siblings();      //选择div的同级元素
• $('div').find('.myClass'); //选择div内的class等于myClass的元素
  

三、jQuery样式操作1.操作行间样式

• // 获取div的样式
• $("div").css("width");
• $("div").css("color");
  

• // 设置div的样式
• $("div").css("width","30px");
• $("div").css("height","30px");
• $("div").css({fontSize:"30px",color:"red"});
  

    特别注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

2.操作样式类名

• $("#div1").addClass("divClass2")             // 为id为div1的对象追加样式divClass2
• $("#div1").removeClass("divClass")          // 移除id为div1的对象的class名为divClass的样式
• $("#div1").removeClass("divClass divClass2") // 移除多个样式
• $("#div1").toggleClass("anotherClass")       // 重复切换anotherClass样式
  

四、jQuery属性操作1.html函数

• // 取出html内容
• var $htm = $('#div1').html();
  

• // 设置html内容
• $('#div1').html('<span>添加文字</span>');
  

2.text函数

• // 取出文本内容
• var $htm = $('#div1').text();
  

• // 设置文本内容
• $('#div1').text('<span>添加文字</span>');
  

3.attr函数

• // 取出图片的地址
• var $src = $('#img1').attr('src');
  

• // 设置图片的地址和alt属性
• $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
  

4.绑定click事件

    给元素绑定click事件，可以用如下方法：

• $('#btn1').click(function(){
•     // 内部的this指的是原生对象
•     // 使用jquery对象用 $(this)
• })
  

五、jQuery特殊效果

• $btn.click(function(){
•     $('#div1').fadeIn(1000,'swing',function(){
•         alert('done!');
•     });
• });
• fadeIn()      // 淡入
• fadeOut()     // 淡出
• fadeToggle()  // 切换淡入淡出
• hide()        // 隐藏元素
• show()        // 显示元素
• toggle()      // 依次展示或隐藏某个元素
• slideDown()   // 向下展开
• slideUp()     // 向上卷起
• slideToggle() // 依次展开或卷起某个元素
  

六、jQuery链式调用

    jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写：

• $('#div1')        // id为div1的元素
• .children('ul')   // 该元素下面的ul子元素
• .slideDown('fast') // 高度从零变到实际高度来显示ul元素
• .parent()        // 跳到ul的父元素，也就是id为div1的元素
• .siblings()      // 跳到div1元素平级的所有兄弟元素
• .children('ul')   // 这些兄弟元素中的ul子元素
• .slideUp('fast'); // 高度实际高度变换到零来隐藏ul元素
  

七、jQuery动画

    通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

• $('#div1').animate({
•     width:300,
•     height:300
• },1000,swing,function(){
•     alert('done!');
• );
  

    参数可以写成数字表达式：

• $('#div1').animate({
•     width:'+=100',
•     height:300
• },1000,swing,function(){
•     alert('done!');
• });
  

八、尺寸相关、滚动事件1.获取和设置元素的尺寸

• width()、height()                  // 获取元素width和height  
• innerWidth()、innerHeight()        // 包括padding的width和height  
• outerWidth()、outerHeight()        // 包括padding和border的width和height  
• outerWidth(true)、outerHeight(true) // 包括padding和border以及margin的width和height
  

2.获取元素相对页面的绝对位置

• offset()
  

3.获取可视区高度

• $(window).height();
  

4.获取页面高度

• $(document).height();
  

5.获取页面滚动距离

• $(document).scrollTop();  
• $(document).scrollLeft();
  

6.页面滚动事件

• $(window).scroll(function(){  
•     ......  
• })
  

九、jQuery事件1.事件函数列表

• blur()     // 元素失去焦点
• focus()    // 元素获得焦点
• change()   // 表单元素的值发生变化
• click()    // 鼠标单击
• dblclick() // 鼠标双击
• mouseover() // 鼠标进入(进入子元素也触发)
• mouseout() // 鼠标离开(离开子元素也触发)
• mouseenter()// 鼠标进入(进入子元素不触发)
• mouseleave() // 鼠标离开(离开子元素不触发)
• hover() // 同时为mouseenter和mouseleave事件指定处理函数
• mouseup() // 松开鼠标
• mousedown() // 按下鼠标
• mousemove() // 鼠标在元素内部移动
• keydown() // 按下键盘
• keypress() // 按下键盘
• keyup() // 松开键盘
• load() // 元素加载完毕
• ready() // DOM加载完成
• resize() // 浏览器窗口的大小发生改变
• scroll() // 滚动条的位置发生变化
• select() // 用户选中文本框中的内容
• submit() // 用户递交表单
• toggle() // 根据鼠标点击的次数，依次运行多个函数
• unload() // 用户离开页面
  

2.绑定事件的其他方式

• $(function(){
•     $('#div1').bind('mouseover click', function(event) {
•         alert($(this).html());
•     });
• });
  

    取消绑定事件

• $(function(){
•     $('#div1').bind('mouseover click', function(event) {
•     alert($(this).html());
•     // $(this).unbind();
•     $(this).unbind('mouseover');
•     });
• });
  

十、主动触发与自定义事件1.主动触发

    可使用jQuery对象上的trigger方法来触发对象上绑定的事件。

2.自定义事件

    除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

• //给element绑定hello事件
• element.bind("hello",function(){
•     alert("hello world!");
• });
•    
• //触发hello事件
•     element.trigger("hello");
  

十一、事件冒泡1.什么是事件冒泡

    在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

2.事件冒泡的作用

    事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

3.阻止事件冒泡

    事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止。

• $(function(){
•     var $box1 = $('.father');
•     var $box2 = $('.son');
•     var $box3 = $('.grandson');
•     $box1.click(function() {
•         alert('father');
•     });
•     $box2.click(function() {
•         alert('son');
•     });
•     $box3.click(function(event) {
•         alert('grandson');
•         event.stopPropagation();
•     });
•     $(document).click(function(event) {
•         alert('grandfather');
•     });
• })
• ......
• <div class="father">
•     <div class="son">
•         <div class="grandson"></div>
•     </div>
• </div>
  

4.阻止默认行为

    阻止右键菜单。

• $(document).contextmenu(function(event) {
•     event.preventDefault();
• });
  

5.合并阻止操作

    实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用。

• // event.stopPropagation();
• // event.preventDefault();
• // 合并写法：
• return false;
  

十二、事件委托1.事件委托

    事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

2.一般绑定事件的写法

• $(function(){
•     $ali = $('#list li');
•     $ali.click(function(event) {
•         $(this).css({background:'red'});
•     });
• })
• ...
• <ul id="list">
•     <li>1</li>
•     <li>2</li>
•     <li>3</li>
•     <li>4</li>
•     <li>5</li>
• </ul>
  

3.事件委托的写法

• $(function(){
•     $list = $('#list');
•     $list.delegate('li', 'click', function(event) {
•         $(this).css({background:'red'});
•     });
• })
• ...
• <ul id="list">
•     <li>1</li>
•     <li>2</li>
•     <li>3</li>
•     <li>4</li>
•     <li>5</li>
• </ul>
  

4.取消事件委托

• // ev.delegateTarge 委托对象
• $(ev.delegateTarge).undelegate();
• // 上面的例子可使用 $list.undelegate();
  

十三、jQuery元素节点操作1.创建节点

• var $div = $('<div>');
• var $div2 = $('<div>这是一个div元素</div>');
  

2.插入节点

    ①append()和appendTo()：在现存元素的内部，从后面插入元素

• var $span = $('<span>这是一个span元素</span>');
• $('#div1').append($span);
• ......
• <div id="div1"></div>
  

    ②prepend()和prependTo()：在现存元素的内部，从前面插入元素
    ③after()和insertAfter()：在现存元素的外部，从后面插入元素
    ④before()和insertBefore()：在现存元素的外部，从前面插入元素

3.删除节点

• $('#div1').remove();
  

十四、滚轮事件与函数节流1.jquery.mousewheel插件使用

    jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jQuery的滚轮事件插件jquery.mousewheel.js。

2.函数节流

    javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

十五、ajax与jsonp

    ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

1.同步和异步

    现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

2.局部刷新和无刷新

    ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

3.同源策略

    ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

• XMLHttpRequest cannot load https://www.baidu.com/. No  
• 'Access-Control-Allow-Origin' header is present on the requested resource.  
• Origin 'null' is therefore not allowed access.
  

4.$.ajax使用方法

    常用参数：
    ①url 请求地址
    ②type 请求方式，默认是'GET'，常用的还有'POST'
    ③dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
    ④data 设置发送给服务器的数据
    ⑤success 设置请求成功后的回调函数
    ⑥error 设置请求失败后的回调函数
    ⑦async 设置是否异步，默认值是'true'，表示异步
    以前的写法：

• $.ajax({
•     url: 'js/user.json',
•     type: 'GET',
•     dataType: 'json',
•     data:{'aa':1}
•     success:function(data){
•          ......
• },
•     error:function(){
•         alert('服务器超时，请重试！');
•     }
• });
  

    新的写法(推荐)：

• $.ajax({
•     url: 'js/user.json',
•     type: 'GET',
•     dataType: 'json',
•     data:{'aa':1}
• })
• .done(function(data) {
•      ......
• })
• .fail(function() {
•     alert('服务器超时，请重试！');
• });
  

5.jsonp

    ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。
    jsonp的原理如下：

• <script type="text/javascript">
•     function aa(dat){
•         alert(dat.name);
•     }
• </script>
• <script type="text/javascript" src="....../js/data.js"></script>
  

    页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：

• aa({"name":"tom","age":18});
  

    外部js文件调用页面上定义的函数，通过参数把数据传进去。

十六、正则表达式1.什么是正则表达式

    能让计算机读懂的字符串匹配规则。

2.正则表达式的写法

• var re=new RegExp('规则', '可选参数');
• var re=/规则/参数;
  

3.规则中的字符

    1) 普通字符匹配

        /a/ 匹配字符 "a"，/a,b/ 匹配字符 "a,b"。
    2) 转义字符匹配

        ①\d 匹配一个数字，即0-9。
        ②\D 匹配一个非数字，即除了0-9。
        ③\w 匹配一个单词字符（字母、数字、下划线）。
        ④\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]。
        ⑤\s 匹配一个空白符。
        ⑥\S 匹配一个非空白符。
        ⑦\b 匹配单词边界。
        ⑧\B 匹配非单词边界。
        ⑨. 匹配一个任意字符，除了换行符"\n"和回车符"\r"。

4.量词

    对左边的匹配字符定义个数。
    ①? 出现零次或一次（最多出现一次）。
    ②+ 出现一次或多次（至少出现一次）。
    ③* 出现零次或多次（任意次）。
    ④{n} 出现n次。
    ⑤{n,m} 出现n到m次。
    ⑥{n,} 至少出现n次。

5.任意一个或者范围

    ①[abc123] : 匹配&lsquo;abc123&rsquo;中的任意一个字符。
    ②[a-z0-9] : 匹配a到z或者0到9中的任意一个字符。

6.限制开头结尾

    ①^ 以紧挨的元素开头。
    ②$ 以紧挨的元素结尾。

7.修饰参数

    ①g： global，全文搜索，默认搜索到第一个结果接停止。
    ②i： ingore case，忽略大小写，默认大小写敏感。
    ③m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）。

8.常用函数

    1) test

        用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假。

    2) search

        用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1。

    3) match

        用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null。

    4) replace

        用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符。

9.正则默认规则

    匹配成功就结束，不会继续匹配，区分大小写

十七、本地存储1.本地存储

    本地存储分为cookie，以及新增的localStorage和sessionStorage

2.cookie

    ①cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。
    ②jQuery 设置cookie

• $.cookie('mycookie','123',{expires:7,path:'/'});
  

    ③jquery 获取cookie

• $.cookie('mycookie');
  

3.localStorage

    localStorage存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

• // 设置
• localStorage.setItem("dat", "456");
• localStorage.dat = '456';
  

• // 获取
• localStorage.getItem("dat");
• localStorage.dat
  

• // 删除
• localStorage.removeItem("dat");
  

4.sessionStorage

    ①sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。
    ②localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。
    ③iPhone的无痕浏览不支持Web Storage，只能用cookie。