前端基础JQuery

Posted 2020-10-02 吃柚子的小白

JQuery对象是通过JQquery包装DOM对象后产生的对象。JQuery对象是JQuery独有的。如果一个对象是JQuery对象，那么它就可以使用JQuery中的方法。

$("#test").html();
    获取ID为test的元素内的html代码
DOM实现代码:document.getElementById("test").innerHTML;
虽然JQuery对象是DOM对象包装后产生的，但是JQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery中的方法
    约定如果获取的是JQuery对象，那么要在变量前加$
var $variable=JQuery对象
var variable=DOM对象
$variable[0]:JQuery对象转为DOM对象
$("#test")[0].innerHTML;

选择器

　　基本选择器

$("*") 通配
$(#id") ID
$(".class") 类
$("element") 标签
$(".class,p,div") 多个元素

　　层级选择器

$(".outer div") .outer所有div后代
$(".outer>div") .outer所有子代div
$(".outer+div") .outer毗邻div标签
$(".outer~div") .outer普通兄弟div标签

　　基本选择器

$("li:first") li中的第一个元素
$("li:eq(2)") li中索引为2的元素
$("li:even") li中索引为偶数的元素
$("li:gt(1)") li中索引大于1的元素
$("li:lt(3)") li中索引小于2的元素
$("li:odd") li中索引为奇数的元素

　　属性选择器

$(‘[id="div1"]‘) id为div1的元素
$(‘[xiaobai="handsome"][id]‘) xiaobai属性为handsome且有id属性的标签

　　表单选择器

只适用于input标签
$(‘[type="text"]‘)=>$(":text")

筛选器

　　过滤选择器

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

　　查找筛选器

查找子标签： $("div").children(".test") 查找div中所有类名为test的子元素
                    $("div").find(".test") 查找div中所有类名为test的后代标签
向下查找兄弟标签：$(".test").next() 类名为test的下一个兄弟元素
                            $(".test").nextAll() 类名为test以后的所有兄弟元素
                            $(".test").nextUntil() 类名为test以后的某条件之前的元素，不包含末元        
                            素
向上查找兄弟标签：$(".test").prev() 类名为test的之前的一个兄弟元素
                            $(".test").prevAll()
                            $(".test").prevUntil()
查找所有兄弟标签：$(".test").siblings()
查找父标签： $(".test").parent()    
                    $(".test").parents()
                    $(".test").parentUntil()