jQ的简单操作01

jq语法

js入口函数

window.onload = function () {
    // 执行代码
}

jq入口函数

$(document).ready(function(){
    // 执行代码
});
简写为：
$(function(){
    // 执行代码
});

区别：

window.onload必须等到网页全部加载完成（html、css 、img），然后执行代码，如果有多个，只能执行最后一次。

$(function(){ })只要等html文档加载完成就能执行，且能够执行多次，不会被覆盖。

例：

 window.onload = function () {
     console.log("123")
 };
 window.onload = function () {
     console.log("234")
 };
 //234
 $(document).ready(function () {
    console.log('1')
});
//1
$(document).ready(function () {
    console.log('2')
});
//2

jq选择器

注意：在使用 jq 时需要用<script src=""></script>引入 jq，可以是 jq 文档，也可以是网址。下载或引用的网址：https://www.jq22.com/jquery-info122

基本选择器

$("选择器")；//获取指定标签的元素
$("#id");//获取指定id的元素
$(".class");//获取指定类名的元素
$("选择器，选择器");//获取指定标签的元素，类似群组选择器
$("*");//获取所有元素

例子：

<div id="box">
    <p class="a"></p>
    <span></span>
</div>

console.log($("span")); //[span]
console.log($("#box")); //[div#box]
console.log($(".a")); //[p.a]
console.log($("*")); //[html, head, meta, meta, title, script, body, div#box, p.a, span, script]
console.log($("div,p")); //[div#box, p.a]

层级选择器

$("选择器 选择器");//根据祖先级元素匹配所有后代选择器
$("父级选择器>子级选择器");//匹配父元素的所有子元素
$("prev+next");//匹配与prev元素相邻的元素
$("prev~siblings");//匹配prev元素之后的所有兄弟元素

例：

<ul id="ul"> 
    <li id="li"></li>
    <li></li>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

console.log($("#ul li"));//[li#li, li, li, li, li]
//匹配所有指定的后代元素，包括：儿子、孙子
console.log($("#ul>li"));//[li#li, li, li, li]
//只匹配子级，也就是儿子
console.log($("#li+li"));//[li];  
//如果指定了id名或类名，只匹配相邻的一个元素
console.log($("li+li"));//[li, li, li];  
//如果没有指定id名或类名的元素，则匹配所有相邻的元素
console.log($("#li~li"));//[li, li, li]
console.log($("li~li"));//[li, li, li]
//无论是否指定id名或类名，都匹配所有的兄弟元素

筛选选择器（过滤选择器）

简单过滤选择器

$("选择器:first")；//获取选择器下第一个元素
$("选择器:last")；//获取选择器下最后一个元素
$("选择器:even")；//获取下标为偶数的所有元素
$("选择器:odd")；//获取下标为奇数的所有元素
$("选择器:eq()")；//获取特定下标的元素
$("选择器:gt()")；//获取下标大于某个值的所有元素
$("选择器:lt()")；//获取下标小于某个值的所有元素
$(":root")；//获取根元素html

例：

 <ul>
     <li class="0"></li>
     <li class="1"></li>
     <li class="2"></li>
     <li class="3"></li>
     <li class="4"></li>
     <li class="5"></li>
     <p></p>
 </ul>

console.log($('ul li:first'));//[li.0]
console.log($('ul li:last'));// [li.5]
console.log($('ul p:not(li)'));//
console.log($('ul li:even'));//[li.0, li.2, li.4]
console.log($('ul li:odd'));//[li.1, li.3, li.5]
console.log($('ul li:eq(2)'));//[li.2]
console.log($('ul li:gt(3)'));//[li.4, li.5]
console.log($('ul li:lt(3)'));//[li.0, li.1, li.2]

内容过滤选择器

$("选择器:contains(text)")；//获取包含给定文本的元素
$("选择器:empty")；//获取不含子元素或文本为空的元素
$("选择器:has()")；//获取含有匹配元素的元素
$("选择器:parent")；//获取含有子元素或文本的元素

例：

<ul>
    <li class="0">123</li>
    <li class="1">456</li>
    <li class="2">789</li>
    <li class="3">
        <ul>
            <li></li>
        </ul>
    </li>
    <li class="4"></li>
    <li class="5"></li>
</ul>

console.log($("li:contains(123)"));//[li.0]
console.log($("li:empty"));//[li, li.4, li.5]
console.log($("li:has(ul)"));//[li.3]
console.log($("li:parent"));//[li.0, li.1, li.2, li.3]

可见性过滤选择器

$("选择器:hidden")；//获取不可见的元素
$("选择器:visable")；//获取可见的元素

例：

<ul>
    <li class="0">123</li>
    <li class="1">456</li>
    <li class="2" style="display: none;">789</li>
    <li class="3">
        <ul>
            <li></li>
        </ul>
    </li>
    <li class="4"></li>
    <li class="5"></li>
</ul>

console.log($("li:hidden"));//[li.2]
console.log($("li:visible"));//[li.0, li.1, li.3, li, li.4, li.5]

属性过滤选择器

$("标签[属性]");//获取有指定属性的元素
$("标签[属性='值']");//获取指定属性是特定值的元素
$("标签[属性！='值']");//获取除特定属性值以外的元素
$("标签[属性^='值']");//获取以某个属性值开头的所有元素
$("标签[属性$='值']");//获取以某个属性值结尾的所有元素
$("标签[属性*='值']");//获取含有某个属性值的所有元素

子元素过滤选择器

$(":first-child");//获取第一个子元素
$(":first-of-type");//获取特定类型的第一个子元素
$(":last-child");//获取最后一个子元素
$(":last-of-type");获取特定类型的最后一个子元素
$(":nth-child");//获取特定位置的子元素
$(":nth-of-type");获取特定类型的特定位置的子元素
$(":only-child");//获取仅有的一个元素
$(":only-of-type");获取特定类型的仅有的一个子元素

表单对象过滤选择器

$(":input");//获取表单元素
$(":radio");//获取单选框元素
$(":checkbox");//获取复选框元素
$(":select");//获取下拉列表元素
$(":button");//获取按钮元素
$(":textarea");//获取文本域元素
$(":text");//获取文本框元素
$(":password");//获取密码框元素

表单对象属性过滤选择器

$(":enabled");//获取可用元素
$(":disabled");//获取不可用元素
$(":checked");//获取被选中元素
$(":selected");//获取被选中选项元素

过滤选择器

$("").children("");//选取子元素
$("").find("");//返回被选元素的后代元素
$("").siblings("");//兄弟元素
$("").parent("");//父元素
$("").eq();//特定下标的元素
$("").next("");//相邻的下一个元素
$("").prev("");//相邻的上一个元素
$("").index();//获取元素下标