Jquery(DOM和选择器)

O(∩_∩)O~~~，今天简单整理了一下最近所学的Jquery知识。下面就总结一下。

首先，对于Jquery我们需要简单了解下：

1.Jquery是开放源代码的JS库，

2.Jquery操作是函数式编程，所有操作都是方法。$代替Jquery

3.Jquery页面加载

$(document).ready(function () {alert("hello world") });

        //$(function () { alert("hello world") }) //简写形式

Jquery对象：就是通过Jquery包装DOM对象产生的对象，Jquery对象是Jquery独有的，如果一个对象是Jquery对象，那么就可以使用Jquery对象里的所有方法。但Jquery对象无法使用DOM对象的任何属性和方法，而DOM对象也无法使用Jquery对象的任何方法。

Jquery与DOM之间的转换

Jquery转DOM

 <script>     
        $(function () {
            var j = $("#p");
            var domp = p[0];
        })
   
    </script>

DOM转Jquery

var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

Jquery选择器——基本选择器

1.id选择器：给指定id匹配一个元素，返回单个值

<script src="jquery.min.js"></script>
    <script>
        $(function ()
        {
           alert($("#p").text());
        })
    </script>

2.类选择器:给指定类名匹配元素 返回数组集合元素

 <script src="jquery.min.js"></script>
    <script>
        $(function ()
        {
            $(".div").each(function()  //用.表示
              {
                alert($(this).text())
            })
        })
    </script>

注：jquery里没有foreach循环，只能用each循环遍历出来。

3.标签选择器：根据给定的标签元素匹配元素 返回数组集合元素

 <script>
        $(function ()
        {
            $("div").each(function () //直接$("div")
            {
                alert($(this).text())
            })
        })
    </script>

4.多选择器：将一个选择器匹配到元素并一起返回 集合元素

5.星选择器：匹配所有的元素（用*表示）

Jquery选择器——层次选择器

1.后代选择器:选取div元素后面的所有后代节点  返回集合元素

<script>
        $(function ()
        {
            $("div span").each(function () //选取div后面所有的span标签
            {
                alert($(this).html())
            })
        })
    </script>

2.直接后代选择器：选取div下面的子元素 返回集合元素