jQuery语法

https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

DOM对象和jQuery之间的互相转换

<script>
    /*dom对象获取*/
    var objDOM = document.getElementById("tv_div")
    alert(objDOM.innerHTML)
    /*DOM转jquer对象*/
    var $objJQ = $(objDOM)
    alert($objJQ.html())
    /*jquery转换为Dom*/
    var objDom1 = $objJQ[0];
    var objDom2 = $objJQ.get(0)
    alert(objDom1.innerHTML)
    alert(objDom2.innerHTML)
</script>

先获取DOM对象，然后在将其用工厂函数包装成jQuery对象

var $obj = $( objDOM )

将jQuery转换成DOM对象：

1： $obj[0]

2:    $obj.get(0)

jQuery选择器：

基本选择器：

1，标签选择器

2，类选择器

3，id选择器

4，并集选择器

5，全局选择器

<script>
    $(document).ready(function(){
        /*标签选择器*/
        $("p").css({"color":"red"})
        /*类选择器*/
        $(".imgLeft").css({"color":"red"})
        /*ID选择器*/
        $("#book").css({"color":"red"})
        /*并集选择器*/
        $("h1 p").css({"color":"red"})
        /*全局选择器*/
        $("*").css({"color":"red"})
    })
</script>

层次选择器：

1，后代选择器

2，子选择器

3.相邻选择器

4，同辈选择器

script>
    $(document).ready(function(){
        /*后代选择器*/
        $("#book p").css({"color":"blue"})
        /*子选择器*/
        $("#book>p").css({"color":"blue"})
        /*相邻选择器*/
        $("#book+p").css({"color":"blue"})
        /*同辈选择器*/
        $("#book~p").css({"color":"blue"})
    })
</script>

属性选择器：

1，$("[src]")   //只要属性中包含src = "#" 的属性，就会被选中

2,[attribute = value]      //属性attribute的值等于value时就会被选中

3,[ attribute != value ]     //不等于

4,[ attribute^ = value ]    //value开头的

5,[attribute$ = value ]     //以value结尾的

6,[attribute* = value]      //只要包含了value

<script>
    /*属性选择器*//*包含选择器，包含class的a标签都被选中*/
    $("#news a[class]").css({"background-color":"red"})
    /*class属性为more的都被选择*/
    $("a[class=more]").hide()
    /*class属性 不 为more的都被选择*/
    $("a[class!=more]").hide()
    /*herf以www开头的*/
    $("#news a[href^='www']").css({"background-color":"red"})
    /*herf以html结尾的*/
    $("#news a[href$='html']").css({"background-color":"red"})
    /*href全部被选择*/
</script>

过滤选择器：

1，基本过滤选择器

2，可见性过滤选择器

3，表单对象过滤器

4，内容过滤器，子元素过滤器

基本过滤器：

：first选取第一个子元素

：last  选取最后一个子元素

：not（selector)   不包含selector属性的所有元素

：even  偶数行（由索引）来判断索引从零开始

：odd  奇数行   一样由零开始索引

：eq(index)   索引等于index的元素

：gt(index)   大于index索引的元素都被选中

：lt(index)    小于index索引的元素都被选中

：header   选取所有的h1~h6标题元素

：focus    选取当前获取焦点的元素

：animated   选取当前所有的的动画

可见性过滤选择器：

：visible  选取所有可见的元素

：hidden   选取所有隐藏元素

$("#txt_2").hide();
$(document).ready(function(){
    $("#show").click(function(){
        $("p:hidden").show();
    })
    $("#hide").click(function(){
        $("p:visible").hide();
    })
})

有特殊符号的元素名称要用特殊的解决方法

例如： id= “id#a"             id = "id[2]

    $("#id \\#a")

    $("#id\\[2\\]")