JQuery_

JQuery

jq 入口函数

$(doctument).ready(function(){

})

$(function(){

})

动画函数

animate参数：

参数一：要改变的样式属性值，写成字典的形式

参数二：动画持续的时间，单位为毫秒，一般不写单位

参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动

参数四：动画回调函数，动画完成后执行的匿名函数

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

jQuery 属性操作

.html()

.prop()

.attr() 获取自定义标签的值,用法和prop一样

循环 each

   $(function(){
        $('li').each(function(event){
            // each里面形参表示的是each选中的标签的索引值
            // alert(event)
            $(this).html(event)
        })
    })

jquery事件

事件	描述
click()	点击事件
blur()	失去焦点
focus()	获取焦点
mouseover()	鼠标进入（进入子元素也触发）
mouseout()	鼠标离开（离开子元素也触发）
mouseenter()	鼠标进入（进入子元素不触发）
mouseleave()	鼠标离开（离开子元素不触发）
hover()	同时为mouseenter和mouseleave事件指定处理函数
submit()	提交表单

表单验证

规则:
var re = new RegExp(‘规则’,’可选参数’)

var re =/规则/参数;

事件冒泡

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

$(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>

阻止默认行为

return falses

事件委托

用法: $(‘ul’).delegete(事件发生在哪,事件属性,匿名函数)

作用:

1. 提高代码执行效率
2. 给未来元素绑定命令(单纯给未来元素绑定命令 $(‘li’).on(事件属性,匿名函数))

DOM操作(节点操作)

DOM: 网页文档的根/根标签

追加节点:同级追加和自己追加(前面 后面)

步骤:

1. 声明变量保存的节点数据
2. 使用追加函数追加节点

子级追加:

1. append()和appendTo()：在现存元素的内部，从后面放入元素

2. prepend()和prependTo()：在现存元素的内部，从前面放入元素

父级追加:

1. after()和insertAfter()：在现存元素的外部，从后面放入元素
2. before()和insertBefore()：在现存元素的外部，从前面放入元素

删除节点:remove()或empty()

   $(function(){
        // 追加节点：同级追加 和 子级追加  （前面  后面）
        // 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点
        var $li = $('<li>2222</li>')
        // ul子级追加
        // $li.appendTo($('ul'))  //结尾追加
        // $('ul').append($li)
        // $li.prependTo($('ul'))  // 开头追加
        // $('ul').prepend($li)

        var $div = $('<div>divdiv</div>')
        // $div.insertAfter($('ul'))
        // $('ul').after($div)
        // $div.insertBefore($('ul'))
        // $('ul').before($div)

        // 删除节点
        // $('ul').remove()
        // $('ul').empty()
    })

ajax和json

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。

ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

同步和异步

同步:一件事情做完再去做另一件事情

异步:同时做多件事情

.ajax使用方法

常用参数：

1、url 请求地址

2、type 请求方式，默认是’GET’，常用的还有’POST’

3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是’true’，表示异步

以前的写法：

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
    success:function(dat){
        alert(dat.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});

新的写法(推荐)：

$.ajax({
    url: '/change_data',
    type: 'GET',
    dataType: 'json',
    data:{'code':300268}
})
.done(function(dat) {
    alert(dat.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

$.ajax的简写方式

$.ajax按照请求方式可以简写成$.get或者$.post方式

$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});