jQuery 基础知识

Posted 2020-10-11 Eric

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 基础知识相关的知识，希望对你有一定的参考价值。

一、序言

　　jQuery是一个快速、简洁的javascript框架，是继Prototype之后的又一个优秀的JavaScript代码库(JavaScript框架)。jQuery设计的宗旨是"Write Less, Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和AJAX交互。
　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

二、jQuery对象

　　Query对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。
如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法:$("#test").html()；

$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：document.getElementById("test").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法
同理DOM对象也不同使用jQuery里的方法
约定：如果获取的是jQuery对象，那么要在变量前面加上$

var $variable = jQuery对象
var variable = DOM对象

$variable[0]:jquery对象转换为dom对象
$("#msg").html(); -> $("#msg")[0].innerHTML;

//jquery的基础语法：$(selector).acttion()

三、jQuery框架分类

核心
选择器
属性
CSS
文档处理
筛选
效果
事件
事件对象
延迟对象
回调函数
AJAX
工具

四、选择器

4.1 基本选择器

    $("*")      $("#id")        $(".class")         $("element")        $(".class,p,div")

4.2 层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

4.3 基本筛选器

$("li:fister")  $("li:eq(2)")   $("li:even")    $("li:gt(1)")

4.4 属性选择器

$(‘[id="div1"]‘)    $(‘[name="abc"[id]]‘)

4.5 表单选择器

 $("[type=‘text‘]") ----> $(":text")
    //注意只适用于input标签： $("input:checked")

4.6 表单属性选择器

 :enabled
 :disabled
 :checked
 :selected

五、筛选器

5.1 过滤筛选器

$("li").eq(2)   $("li").first() $("ul li").hasclass("test")

5.2 查找筛选器

   // 查找子标签：
$("div").childred(".test");
$("div").find(".test");

    //向下查找兄弟标签：
$(".test".next());  
$(".test".nextAll();
$(".test").nextUntil();

    //向上查找兄弟标签：
$("div").prev();   
$("div").prevAll();
$("div").prevUntil();

    //查找所有兄弟标签：
$("div").siblings();

    //查找父标签：     
$(".test").parent();     
$(".test").parents();
$(".test").parentUntil();

六、事件

//页面载入
read(fn)    //到DOM载入就绪可以查询及操作时绑定一个要执行的函数
#(document).ready(function(){}  //也可以写成 $(function(){}    文档就绪事件

//事件绑定
//语法：标签对象.事件(函数)
eg：$("p").click(function(){})

//事件委派
$("").on(eve,[selector],[data],fn)  //在选择元素上绑定一个或多个时间处理函数

//事件切换
hover ：一个模仿悬停事件(鼠标移动到一个对象上面及移除这个对象)的方法。这个一个自定义的方法，它为频繁使用的任务提供了一种"保持在其中“de ”的状态
over：鼠标移到元素上要触发的函数
out：鼠标移除元素要触发的函数

七、属性操作

    //CSS类
    $("").addClass(class|fn)
    $("").removeClass([class|fn])

    //属性
    $("").attr();
    $("").removeAttr();
    $("").prop();
    $("").removeProp();

    //HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])
    $("#c1").css({"color":"red", "fontSize":"35px"})

    //attr使用方法：
    <input id="chk1" type="checkbox" />
    <input id="chk2" type="checkbod" checked="checked" />

    <script>
    //对于HTML元素本身就带有的固定属性，在处理时，使用prop方法
    //对于HTML元素我们自己定义的DOM属性，在处理时，使用attr方法
    //像checkbox, radio和select这样的元素，选中属性对应"checked"和"selected"，这些属于固有属性，因此
    //需要使用prop方法去操作才能获得正确的结果

    $("#chk1").attr("checked")  // undefined
    $("#chk1").prop("checked")  //false

    //手动选中的时候attr()获得到没有意义的undefined
    //$("#chk1").attr("checked")  // undefined
    //$("#chk1").prop("checked")  //true

    console.log($("#chk1").prop("checked")); //false
    console.log($("#chk2").prop("checked")); //true
    console.log($("#chk1").attr("checked")); //undefined
    console.log($("#chk2").attr("checked")); //checked

    </script>

八、工具-each循环

我们知道
$("p").css("color","red")
是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签就行不同处理，这时就需要
对所有标签数组就行循环遍历

    //jQuery支持两个循环方式：
    //方式1：
    $.each(obj,fn)
    arr = [10, 20, 30, 40];
    dic = {name:"abc", sex:"male"};
    $.each(arr, function(i,x){
        console.log(i,x)
    })

    //方式2：//$(this)指当前循环标签
    $("").each(fn)
    $("tr").each(function(){
        console.log($(this).html())
    })

九、文档节点处理

    //创建一个标签对象
    $("<p>")

    //内部插入
    $("").append(content|fn)   --->$("p").append("<b>Helo</b>");
    $("").appendTo(content)    --->$("p")>appendTo("div");
    $("").prepend(content|fn)  --->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)   --->$("p").prependTo("#foo");

    //外部插入
    $("").after(content|fn)    --->$("p").after("<b>Hello</b>");
    $("")>before(content|fn)   --->$("p").before("<b>Hello</b>");
    $("").insertAfter(content) --->$("p").insertAfter("#foo");
    $("").insertBefore(content)--->$("p").insertBefore("#foo");

    //替换
    $("").replaceWith(content|fn) --->$("p").repalceWith("<b>Paragraph.</b>");

    //删除
    $("").empty()
    $("").remove([expr])

    //复制
    $("").clone([Even[,deepEven]])

十、动画效果

//显示隐藏
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquest.js"></script>
        <script>
            $(document).ready(function(){
                $("#hide").click(function(){
                    #("p").hide(1000);
                 });
                $("show").click(function(){
                    #("p").show(1000);
                 });
                //用于切换被选元素的hide()与show()方法
                $("#toggle").click(function(){
                    $("p").toggle();
                });
            })
        </script>

        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>hello<p>
        <button id="hid">隐藏</button>
        <button id="show>显示</button>
        <button id="toggle">切换</button>
    </body>
    </html>

    滑动
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("#slideDown").click(function(){
                    $("#content").slideDown(1000);
                });
                #("#slideUp").click(function(){
                    $("#content").slideUo(1000);
                });
                #("#slideToggle").click(function(){
                    $("#content").slideToggle(1000);
                })
            });
            <style>
                #content{
                    text-align: center;
                    background-color: lightblue;
                    border: solid 1px red;
                    display: none;
                    padding: 50px;
                }
            </style>
        </head>
        <body>
            <div id="slideDown>出现</div>
            <div id="slideUp">隐藏</div>
            <div id="slideToggle">toggle</div>
            <div id="content">helloworld</div>
        </body>
        </html>

        淡入淡出
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="jquery.js"></script>
            <script>
                $(document).ready(function(){
                    $("#in").click(function(){
                        $("#id1").fadeIn(1000);
                    });
                     $("#out").click(function(){
                        $("#id1").fadeOut(1000);
                    });
                     $("#toggle").click(function(){
                        $("#id1").fadeToggle(1000);
                    });
                     $("#fadeto").click(function(){
                        $("#id1").fadeTo(1000,0.4);
                    });
                });
            </script>
        </head>
        <body>
            <button id="in">fadein</button>
            <button id="out">fadeout</button>
            <button id="toggle">fadetoggle</button>
            <button id="fadeto">fadeto</button>

            <div id="id1" style="display:none; width: 80px; height: 80px; background-color: blue;</div>
        </body>
        </html>

十一、回调函数

    callbacks.add(callbacks)    回调列表中添加一个回调或回调的集合
    callbacks.disable()         禁用回调列表中的回调
    callbacks.empty()           从列表中删除所有回调
    callbacks.fire(arguments)   禁用回调列表中的回调
    callbacks.fired()           用给定的参数调用所有的回调
    callbacks.fireWith([c][,a]) 访问给定的上下文和参数列表中的所有回调
    callbacks.has(callback)     确定是否提供回调列表
    callbacks.lock()            锁定在其当前状态的回调列表
    callbacks.locked()          确定是否已被锁定的回调列表
    callbacks.remove(callbacks) 删除回调或回调列表的集合
    jQuery。callbacks(flags)
        一个多用途的回调列表对象，提供了强大的方式来管理回调函数列表。
        $.callback()的内部提供了jQuery的$.ajax()和$.Deferred()基本功能组件。它可以用来作为类似基础定义的新组件的功能。
        $.callbacks()支持的方法，包括callbacks.add(),callbacks.remove(),callbacks.fire(),callbacks.disable()

十二、CSS操作

//css位置操作
$("").offset([coordinates])
$("").positon()
$("").scrollTop)([val])
$("").scrollLeft)([val])

//尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([options])
$("").outWidth([options])

十三、扩展方法(插件机制)

jQuery.extend(object)

//扩展jQuery对象本身
//用来在jQuery命名空间上增加新函数
//在jQuery命名空间上增加两个函数:
<script>
    jQuery.extent({
        min:function(a, b) {return a<b ? a:b;},
        max:function(a, b) {return a>b ? a:b;}
     });

    jQuery.min(2,3); //2
    jQuery.max(4,5); //5
</script>

jQuery.fn.extend(object)
//扩展jQuery元素集来提供新的方法(通常用来制作插件)
//增加两个两个插件方法:
<body>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

     <script src="jquery.js"></script>
     <script>
        jQuery.fn.extend({
            check: function(){
                $(this).attr("checked", true);
            },
            uncheck: function(){
                $(this).attr("shecked", false);
            },
        });

        $(":checkbox":gt(0).check()
     </script>
 </body>