JQuery学习

概述

JQuery就是对JS的一个封装，它对常用的JS操作进行封装，方便我们使用。

引入JQuery

通过script标签的src属性导入：<script src="jquery-1.11.0.min.js" />

JQuery选择器（指定对哪个元素进行操作）

id选择器：$("#id值")
class选择器：$(".class值")
元素选择器：$("元素名")
选择所有元素：$("*")

body内所有div元素：$("body div")
body内，子元素是div：$("body>div")
id为one的下一个div元素：$("#one+div")
id为two的元素，后面所有div兄弟元素:$("#two~div")

第一个Div：$("div:first")
最后一个Div：$("div:last")
索引为基数的Div：$("div:odd")
索引为偶数的Div：$("div:even")
索引为index的Div：$("div:eq(index)")
索引大于index的Div：$("div:gt(index)")
索引小于index的Div：$("div:lt(index)")

div中含有class为mini的元素：$("div:has(.mini)")

div中所有不可见元素：$("div:hidden")
div中所有可见元素：$("div:visible")

div中含有属性title的元素：$("div[title]")
div中含有属性title，且title值为test：$("div[title='test']")

form中所有的表单子元素：$("form  :input")

input中可用的元素：$("input:enabled")
input中不可用的元素：$("input:disabled")
input中被勾选的元素：$("input:checked")
input中被选中的元素：$("input:selected")

触发JQuery动作（对元素如何操作）

1,页面加载完成:
    $(function(){
        函数体；
    })

2,派发事件：
$("选择器").click(function(){
    函数体；
});

$("选择器").submit(function(){
    函数体；
});

$("选择器").blur(function(){
    函数体；
});
$("选择器").focus(function(){
    函数体；
});
....

JQuery的操作

获取JQ对象：var $obj = $("选择器"); ----> 如 var $username=$("#username");

使得JQ对象的图片向下滑落：$obj.slideDown();

使得JQ对象的图片向上收起：$obj.slideUp();

操作JQ对象的CSS样式：
    ①获取指定CSS样式的值
    $obj.css("CSS样式")
    ②设置一个CSS样式
    $obj.css("样式名称"，"样式值")
    ③设置多个CSS样式
    $obj.css({
        样式1:值1,
        样式2:值2
        ...
    })


操作JQ对象的属性：
    ①获取指定属性的值
        $obj.attr("属性名称");
    ②设置一个属性的值
        $obj.attr("属性名称"，"属性值");
    ③设置多个属性的值
        $obj.attr({
            "属性1":"值1",
            "属性2":"值2",
            ...
        })
    ④移除指定属性：
        $obj.removeAttr("属性名称");

注意：若JQuery版本在1.6版本以上，统一用prop修改元素
的属性，因为attr在获取checked状态时会出错。
如：$obj.prop("checked");//true||false


对数组元素的遍历：
$objArr.each(function(){
    alert($(this).val());//this代表当前元素的DOM对象
})

操作JQuery对象的值：
①获取JQ对象的值：$obj.val();
②设置JQ对象的值：$obj.val("新的值");

操作JQuery对象中标签体的内容：
①获取标签体的HTML内容：$obj.html();
②获取标签体的文本内容：$obj.text();
③设置标签体的HTML内容：$obj.html("新的html内容");
④设置标签体的文本内容：$obj.text("新的文本内容");

JQuery对象与DOM对象之间的转换

①DOM对象–>JQuery对象 (将DOM对象封装成JQuery对象)

var JQuery对象 = $(DOM对象);

②JQuery对象–>DOM对象 (从JQuery对象里面取出DOM对象)

方式一：var DOM对象 = JQuery对象[index];
方式二：var DOM对象 = JQuery对象.get(index);

小错误总结

1，如果页面在执行JQuery语句时，突然跳过不执行。
那可能是在获取该元素的时候，没有把选择器写清楚。

如：
元素id为divId
但写成$("divId")是错的。
应该写成$("#divId")

2，如果JQuery语句执行时没有报错误，又或许只报了如下错误

那很有可能是你这个JQuery语句需要在页面加载完成之后，再去执行，但是你却漏了这句话。
所以在JQuery语句前，加上页面加载完成语句即可。

如：
$("#id").change(function(){...}); //没有反应。
改成：
$(function(){
    $("#id").change(function(){...});//可以执行
})