jQuery常用操作

jQuery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，使用$(document).ready(function(){})方法解决这个问题，它的速度比

原生的 window.onload 更快，即在DOM结构加载完毕后就会执行。

$(document).ready(function(){//...});
$(function(){//..});

选择器

基本选择器

• id选择器$('#myId')
• class选择器$('.myClass')
• 标签选择器$("div")
• 属性选择器 $("input[type='text']") (取到类型是text的input标签)
• 组合选择器

方法	描述
$('#item li span')	选择id为item元素下的所有li下的span元素
$("div.box")	找到所有类名为box的div标签
$("#id1, .className1")	找到id为id和类名为className1的元素
$("div>input")	找到div标签里面的所有input子标签
$("div+p")	找到div后面的一个兄弟p标签
$("div~p")	找到div后面的所有兄弟p标签

条件选择器

• 找到所有后代中有p标签的div标签$("div:has(p)")或者$('div').has('p')
• 找到不包含myClass类的div标签$("div:not(.myClass)")或者$('div').not('.myClass')
• 找到所有后代中不含a标签的li标签$("li:not(:has(a))")
• 第一个:first 或者.first()
• 最后一个:last或者.last()
• 索引等于index的那个元素:eq(index)或者.eq()
• 匹配所有大于给定索引值的元素:gt(index)
• 匹配所有小于给定索引值的元素:lt(index)
• 选择class等于myClass的div元素$('div').filter('.myClass')
• 匹配所有索引值为偶数的元素（包括0）:even 　
• 匹配所有索引值为奇数的元素:odd

表单选择器

:text	:password	:file	:radio
:checkbox	:submit	:reset	:button

选中type为text的input标签$(":text")

表单属性

:enabled　（激活）　　　:disabled （禁用）

:checked　（选中）　　　:selected （选中）

1. 找到可用的input标签 $("input:enabled")

2. 返回选中的标签 $("input:checked")

3. 返回select选中的标签 $(":selected")

4. 获取选中标签将其设置为非选中状态 $("input:checked").prop("checked",false)

选择器转移

下个元素

1. 选择div元素后面紧挨的同辈元素$('div').next()
2. 选择div元素后面所有的同辈元素$('div').nextAll()
3. 获得div后面所有跟随的同胞元素，但不包括被选择器$("div").nextUntil(".item")

上个元素

1. 选择div元素前面紧挨的同辈元素$('div').prev()
2. 选择div元素之前所有的同辈元素$('div').prevAll()
3. 获得div前面所有跟随的同胞元素，但不包括被选择器$("div").prevUntil(".item")

父级元素

$("#id").parent()

$("#id").parents() 查找当前元素的所有的父辈元素

$("#id").parentsUntil(".item") 查找当前元素的所有的父辈元素，直到遇到匹配到item类的元素

同级元素

选择div的同级元素 $('div').siblings()

子元素

选择div的所有子元素$('div').children()

查找后代元素

选择div内的class等于myClass的元素$('div').find('.myClass')等价于$("div .myClass")

样式操作

CSS样式

1. 获取div的样式 $("div").css("width")
2. 设置div的样式$("div").css("width","30px")

注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。font-size采用驼峰命名 $("div").css({fontSize:"30px",color:"red"})

类名操作

1. 添加类名addClass

   为id为div的对象追加样式divClass2$("#div").addClass("divClass2")

2. 移除类名removeClass

   移除id为div的对象的class名为divClass的样式$("#div").removeClass("divClass")

   移除多个样式$("#div").removeClass("divClass divClass2")

3. 切换类名toggleClass

   切换类名，如果有就移除item，如果没有就添加item $("#div").toggleClass("item")

获取尺寸及位置

尺寸

1. 获取元素宽和高width()、height()
2. 获取元素宽和高，包括padding的width和height innerWidth()、innerHeight()
3. 获取元素宽和高，包括padding和border的width和height outerWidth()、outerHeight()
4. 获取元素宽和高，包括padding和border以及margin的width和height outerWidth(true)、outerHeight(true)

位置

1. 获取元素相对偏移或设置元素位置 offset()
2. 获取元素相对父元素的偏移 position()
3. 获取元素相对滚动条顶部的偏移 scrollTop()
4. 获取元素相对滚动条左侧的偏移scrollLeft()
5. 获取页面滚动距离$(document).scrollTop()
6. 获取窗口滚动距离$(window).scrollTop()

返回顶部案例

<div class="back_top">返回顶部</div>
<script type="text/javascript">
    $(document).ready(function() {
        //窗口滚动事件
        $(window).scroll(function() {
            var sc=$(window).scrollTop();
            if(sc>200){
                $(".back_top").css("display","block");
            }
            else{
                $(".back_top").css("display","none");
            }
        });
        $(".back_top").click(function(){
            // var sc=$(window).scrollTop();
            // 动画效果
            $("body,html").animate({scrollTop:0},500);
        });
    });
</script>

文本操作

文本

获取所有匹配元素的内容text()

设置所有匹配元素的内容text(值)

html

取得第一个匹配元素的html html()

val值

1. 获取第一个匹配元素的当前value值 val()
2. 设置所有匹配元素的value值val(值)
3. 设置多选的checkbox、多选select的值 val([val1, val2])

常用于input标签值的获取和修改

属性操作

attr() (attribute属性)

1. 获取第一个匹配的属性 attr(k)　
2. 修改所有匹配元素属性 attr(k,v)
3. 为所有匹配元素设置多个属性值 attr({k1: v1, k2:v2})
4. 从每一个匹配的元素中删除一个属性 removeAttr(k)

prop()(property属性)

1. 获取属性prop(k)
2. 修改属性 prop(k，v)
3. 移除属性 removeProp(k)

attr()和prop()区别

prop()是获取标签原始的属性（如，img标签上的src属性），不能自定义属性。

attr()是获取标签上现有的属性，也可以自定义属性。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

元素节点操作

创建节点

var  oDiv1=$('<div>')
var  oDiv2=$('<div>这是一个新的元素</div>')

添加节点

• 内部添加

  • 在现存元素的内部，从后面插入元素

    $(父节点)append(子节点)
    $(子节点)appendTo(父节点)

  • 在现存元素的内部，从前面插入元素

    $(父节点).prepend(子节点)
    $(子节点)prependTo(父节点)

• 外部添加

  • 在现存元素的外部，从后面插入元素

    把b放到a的后面$(a).after(b)或者$(b).insertAfter(a)

  • 在现存元素的外部，从前面插入元素

    把b放到a的前面$(a).before(b)或者$(b).insertBefore(a)

删除节点

• 删除被选元素及其子元素remove()
• 删除被选元素的子元素empty()

替换节点

• $(旧节点).replaceWith(新节点)
• $(新节点).replaceAll(旧节点)

克隆节点clone()

clone(true)，加参数表示克隆节点的同时也克隆事件

jquery循环和data()

each()

对选择的对象集合分别进行操作，需要用到jquery循环操作。

arr = [11,22,33,44]
$.each(arr,function(i, v){
  console.log(i, v);//index是索引，value是每次循环的具体元素。
})
//结果:     0,11   1,22    2,33      3,44    

$(function(){
    $('.list li').each(function(i){
        $(this).html(i);
    })
})

注意：如果对jQuery对象进行相同的操作时，不需要使用.each()方法。在遍历过程中可以使用 return false提前结束each循环。

data()

.data(key, value)

在匹配的元素上存储任意相关数据。

$("#div1").data("temp",true);将id为div1的标签添加数据temp，值为true。

.data(key)

获取匹配元素上的数据

$("#div1").data("temp");获取id为div1的标签上的数据temp，返回true。

.removeData(key)

移除存放在元素上的数据

$("#div1").removeData("temp"); 移除元素上temp对应的数据

data()用途: 可在标签上存储全局变量，这样不会被其它函数修改。

jQuery 事件

常用事件

方法	描述
focus()	$(selector).focus(function)，元素获得焦点时触发
blur()	$(selector).blur(function)，元素失去焦点时触发
click()	$(selector).click(function)，单击元素时，发生 click 事件
change()	$(selector).change(function)，元素的值改变时发生（仅适用于表单字段）
keydown()	$(selector).keydown(function)，键按下的过程
keyup()	$(selector).keyup(function)，键被松开
hover()	$(selector).hover(inFunction,outFunction)，鼠标指针悬停在被选元素上时要运行的两个函数
input()	该事件在 <input> 或 <textarea> 元素的值发生改变时触发
on()	$(selector).on(event,childSelector(子选择器,可选),function)，添加事件处理程序,适用于当前及未来的元素(如创建的新元素)
off()	$(selector).off(event,selector(可选),function(可选),map)，移除通过 on() 方法添加的事件处理程序

on()绑定事件

on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

$(selector).on(event,childSelector(子选择器,可选),function)

$("table").on("click",".update",function () {...})
//绑定多个事件可以在事件后加空格
$("input").on('input blur',function() {...})

注意：像click、keydown等事件，都可以使用.on()方法来绑定事件，但是hover事件就不能用.on()方法来绑定了。

off()移除绑定

off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

$(selector).off(event,selector(可选),function(可选),map

移除button的点击事件 $("button").off("click");

鼠标事件案例

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <title>鼠标事件</title>
    </head>
    <body>
        <div class="box" style=" 200px;height: 200px;border: 1px solid;"></div>
        <p></p><span></span>
        <script>
            //鼠标移入事件
            $(".box").on("mouseover",function () {
                $(this).css('background','red');
                $("p").text("鼠标移入");
            })
            //鼠标移出事件
            $(".box").on("mouseout",function () {
                $(this).css('background','green');
                $("p").text("鼠标移出");
            })
            //鼠标移动事件
            //e.clientX， ev.clientY来获取相对于窗口的鼠标位置
            //e.pageX,ev.pageY来获取相对于文档的坐标
            $(".box").on("mousemove",function (e) {
                var x = e.clientX;
                var y = e.clientY;
                $("span").text("鼠标移动：X="+x+" Y="+y)
            })
        </script>
    </body>
</html>

事件冒泡

当子元素事件触发时，会自动向父元素传递事件，如果父元素有同类型事件，则会自动触发，从而导致页面的混乱。

阻止事件冒泡 event.stopPropagation()

<body>
    <div class="item1">父元素
        <div class="item2">子元素</div>
    </div>
<script>
        /*事件的冒泡 */
        $('.item1').click(function(event) {
            $('.item1').css('background','blue')
            event.stopPropagation();
        });
        $('.item2').click(function(event) {
            $('.item2').css('background','red')
        });</script>
</body>

阻止默认行为 event.preventDefault()

// a标签单击时，阻止自动跳转
$('a').click(function(event){
            alert('阻止默认行为');
             event.preventDefault();
        })

把阻止冒泡和阻止默认行为合并起来写，合并写法可以用return false;

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过父标签去捕获子标签的事件。

优点：事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //1.普通绑定
    $ali = $('#list li');
    // $ali会默认绑定元素个数的click事件
    $ali.click(function() {
        $(this).css({background:'red'});
    });
    })
    //2.事件委托绑定
    $list = $('#list');
    $list.on('li', 'click', function() {
        //$(this)是委托的子元素li
        $(this).css({background:'red'});
    });
</script>

jQuery效果

animate()动画

$(selector).animate({params},speed,callback);

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},1000);
});

fadeIn() 淡入

$(selector).fadeIn(speed,callback);

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut() 淡出

$(selector).fadeOut(speed,callback);

fadeToggle() 切换淡入淡出

$(selector).fadeToggle(speed,callback);

fadeTo()透明度

$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
  $("#div1").fadeTo("slow",0.2);
});

slideDown() 向下滑动

$(selector).slideDown(speed,callback);

slideUp() 向上滑动

$(selector).slideUp(speed,callback);

slideToggle() 向上或向下滑动切换

$(selector).slideToggle(speed,callback);

jQuery.ajax()

ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步的 Javascript 和 XML”。即使用 Javascript 语言与服务器进行异步交互，传输的数据为 XML（当然，传输的数据不只是 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件， 无须刷新整个页面，但需要用户允许JavaScript在浏览器上执行。

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

ajax请求格式

$.ajax({
    url:   "/user",
    type: "POST",
    traditional: "true",//设置traditional 为true阻止深度序列化
    data: { name: "John", location: "Boston" },
    dataType: "json",
    success: function (data) {
        //...
    },
    error: function (data) {
        //alert( "Request failed: " + data );
    }
});

url 一个包含发送请求的URL字符串.

type (默认: 'GET')method选项的别名。jQuery 1.9.0 之前的版本，需要使用type选项。

data 一个普通对象或字符串，通过请求发送给服务器。

success 当请求成功后执行的回调函数。如果提供dataType选项，那么这个success选项是必须的。

dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, text，html）。

简化格式

get请求

$.get("test.php",
      function(data){
    //..
}, "json");

post请求

$.post( "user/login",
       { username:$("#username").val(),
        password:$("#password").val(),
       },
       function (data) {
    if (!data.flag) {
        //登录失败
    }else{
        //登陆成功
    }
},"json");

serialize()

描述：将用作提交的表单元素的值编译成字符串，用于 Ajax 请求。

$("form").serialize();返回值：String

注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。