JQuery学习

柔情只为你懂 2022-05-21 09:52 155阅读 0赞

> 概述

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语句执行时没有报错误，又或许只报了如下错误  
![这里写图片描述][70]

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

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

[70]: /images/20220521/212b9e38d72e4aea9f3f859cc6cbf8eb.png