六、jQuery中的选择器

1.窗口加载事件
js中

window.function(){
}

jq中

 $(function(){
            console.log($("ul"));
        });
        $(document).ready(function(){
            console.log($("ul"));
        });

2.选择器：

<script>
//    1.基本选择器
    console.log($("#btn"));//ID选择
    console.log($(".li2"));//类选择器
    console.log($("button"));//元素选择器
    console.log($("*"));//全部元素选择器
//    2.层次选择器
    console.log($("ul li"));//父元素下面所有子元素
    console.log($("ul>li"));//父元素下面的子元素
    console.log($(".li2+"));//元素紧邻的元素
    console.log($(".li2+li"));//元素紧邻的元素li
    console.log($(".li2~"));//元素后的元素
    console.log($(".li2~li"));//元素后的元素li
//    3.过滤选择器
    （1）简单过滤
    console.log($("ul>li:first"));//第一个
    console.log($("ul>li:last"));//最后一个
    console.log($("ul>li:even"));//偶数
    console.log($("ul>li:odd"));//奇数
    console.log($("ul>li:eq(2)"));//等于
    console.log($("ul>li:gt(2)"));//大于
    console.log($("ul>li:lt(2)"));//小于
    console.log($("ul>li:not(.li2)"));//除过
    （2）内容过滤
    console.log($("ul>li:contains(2)"));//包含文本
    console.log($("ul>li:empty"));//元素为空
    console.log($("ul>li:parent"));//元素有内容或者子元素
    console.log($("ul>li:has(.li2)"));//有括号里面的子元素
    (3)可见性过滤
    console.log($("ul>li:hidden"));//隐藏
    console.log($("ul>li:visible"));//显示
    (4)属性过滤
    console.log($("ul>li[class]"));//有括号属性
    console.log($("ul>li[class=li3]"));
    console.log($("ul>li[class=li2][id]"));
    (5)子元素过滤
    console.log($("ul>li:first-child"));
    console.log($("ul>li:last-child"));
    console.log($("ul>li:nth-child(2)"));
    console.log($("ul>li:only-child"));//父元素只有一个子元素里面的li
    (6)表单过滤
    console.log($("input:checked"));//选中
    console.log($("#sel:selected"));//只有添加下拉框文本改变事件时才能获取到对应元素
    $("#sel").change(function(){
        console.log($("#sel>option:selected"));
        var a=$("#sel>option:selected");
        a.html("wwwwww");
    });
    4.表单选择器
    console.log($(":input"));//所有input、button、select、textarea
    console.log($(":radio"));//单选框
    console.log($(":checkbox"));//复选框
    console.log($(":text"));//文本框
    console.log($(":button"));//按钮
    console.log($(":submit"));//提交按钮
    console.log($(":reset"));//重置按钮
    console.log($(":password"));//密码框
    console.log($(":image"));//图像域
    console.log($(":file"));//文件域

//点击一个按钮改变文本和样式
$("#btn").click(function(){
    $("#btn").html("wo").css({
        backgroundColor:"red",
        border:"1px solid green"
    });
});
</script>