jQuery基础知识

 刚刚简单的过了一遍原生的JS，现在开始向着jQuery出发，虽然接触程序都一年了才开始接触jQuery，但是没关系啦，哈哈哈哈。

jQuery这种东西呢，是站在JS这个巨人的肩膀上的，所以呢，在某种程度上功能多，现实简单，代码简介等等优势，其实呢，我觉得吧最主要还是要分清jQuery和JS的关系和区别。

======================================================================

alert($);                                           返回的是jQuery的内部定义

alert($());                                         返回的是jQuery对象

alert($("#id"));                                  返回的是id为“id”的jQuery对象

alert($("#id").css("color","red"));         返回的是jQuery对象

 可以知道加上$之后原生的DOM就变成了jQuery对象，但是有时候我们需要原生的DOM元素，那jQuery又是怎么变成的呢

$("#id").get(0)   可以有第二种写法 $("#id")[0]    //可批量处理DOM

$(document.getElementById("id")).css("color","red");  //原生DOM变成 jQuery对象

用实例来证明一下：

jQuery写法：  .is(":checked")是jQuery特有的写法，用来判断jQuery对象是否被选中

 <input id="t1" type="checkbox" />是否同意


 $(function () {
            $("#t1").click(function(){
                if($("#t1").is(":checked"))         
                {
                    alert("OK");
                }
            });
        })

jQuery转成DOM方式：一共2种形式

<input id="t1" type="checkbox" />是否同意

 $(function () {
            $("#t1").click(function () {        
                //if ($("#t1").get(0).checked)
                if ($("#t1")[0].checked) {
                    alert("OK");
                }
            });
        })

 

======================================================================================

 

window.onload=function(){} :

1、要等页面上所有的元素都加载完毕后才执行，假如图片特别大的话，那js就得等到它加载完才执行，多尴尬。

2、可以执行多次，但是以最后的结果为准。

window.onload=function(){alert(1);}     window.onload=function(){alert(2);} 

最后只弹出  2

 

$(document).ready(function(){}):

1、只需要页面上的DOM元素加载完就行了，效率高的不是一点半点啊

2、可以执行多次，并且不会被覆盖，简直就是恩怨分明啊，有木有

$(document).ready(function(){alert(1);})    $(document).ready(function(){alert(2);})

先弹出 1  在弹出 2

3、可以简写成 $(function(){})

 =======================================================================

如何准确无误的判断网页上的某个元素是否存在：

第一种方式：JS

document.getElementById("t1").style.color="red";

如果 页面上没有id为t1的元素，那么肯定就会报错了，一般情况下用js都是这样判断的

if (document.getElementById("t1"))
{
document.getElementById("t1").style.color = "red";
}

第二种方式：jQuery，因为jQuery的封装性特别好，兼容许多浏览器，所以容错能力也强，如果用 if ($("#t1")){},来判断id为t1的元素是否存在的话，那就没有意义了，因为$("#t1")返回的是一个jQuery对象，是一个对象，所以if($("#t1"))永远是true，所以可以用下面2种方式来解决

           if ($("#q").length>0)
            {
                alert(12);
            }
            //或者将其转换成DOM元素来判断
            if ($("#q")[0]) {
                alert(12);
            }

 ==================================================================================

jQuery选择器：

1、基本选择器

用的是最多的  $("#t");   $(".t");   $("p");   $("div,p,span.myclass");     $("*");  这些选取的都是符合条件的所有的元素

 

2、层次选择器：

$("div span")  选取所有的div下的所有的span元素 说白了，就是选取div的所有的后代元素，只要span在div下，即使中间隔了别的元素也能被选中

$("div > span") 选取的是div的子元素里所有的span元素，与上一个有区别的

$("div").next("span") 选取的是div后面的第一个兄弟元素是span的元素

$("div").nextAll("span")  选取的是div后面的所有的兄弟元素是span的元素

$("div").siblings("span")  选取的是div的所有的（前面和后面）兄弟元素是span的元素

 

3、过滤选择器：

 （1）基本过滤选择器：

$("div:first") 选取所有div中的第一个div元素（包含子元素，也就是第一个是div的父元素）   返回单个元素

$("div:last")  选取所有div中的最后一个div元素（最后一个div的最后一个子div） 返回单个元素

$("div:not(.myclass)")  选取所有div元素中class不是myclass的div   返回集合元素

$("div:eq(1)")  选取所有div元素中 索引等于1的div元素（包含子元素，下标从0开始，顺序是父元素——子元素——下一个父元素的兄弟元素——。。。）返回单个元素

$("div:gt(1)")  选取所有div元素中 索引大于1的div元素（包含子元素，下标从0开始，顺序是父元素——子元素——下一个父元素的兄弟元素——。。。）返回集合元素

$("div:lt(1)")  选取所有div元素中 索引小于1的div元素（包含子元素，下标从0开始，顺序是父元素——子元素——下一个父元素的兄弟元素——。。。）返回集合元素

（2）内容过滤选择器：

$("div:contains('我')")  选取文本里包含“我”的div元素   返回集合元素

$("div:empty")  选取不包含子元素或者文本为空的元素，说白了就是一个<div></div>   返回集合元素

$("div:has(.myclass)")   选取后代元素是class=myclass的div元素  返回集合元素

$("div:parent")  选取包含子元素或者文本元素的div元素，说白了div下得有点东西   返回集合元素

（3）可见性过滤器：

$("input:hidden")   选取style="visibility:hidden"的input元素

$("div:visible")   选取所有可见的div元素

 （4）子元素过滤器：

$("div span:nth-child(2)")  div下的第二个子元素必须是span

$("div :first-child")  div下的第一个子元素

$("div :first-last")   div下的最后一个子元素

$("div :only-child")  div下的唯一一个子元素

话说这个子元素的过滤器的规则还真是有点特殊

<div>
        <p>111111</p>
        <p>222222222</p>
        <span>333333333</span>
        <span>4444444444</span>
    </div>   
    <script>
        alert($("div span:first").text());    333333
        alert($("div span:first-child").text());     空
    </script> 

区别就是第一个： a条件下的 c条件下的b    第二个：a条件下的 c条件并且b条件，这就是最大的区别

4、表单对象属性过滤器：

$("#form1 input:enable")

$("#form1 input:disable")

$("input:checked")

$("select :selected").text()

$(":text")选取所有的单行文本框    $(":checkbox")选取所有复选框   $(":input")包含所有的input textarea  select button    $("input")只是input元素而已，注意二者的区别，另外还有一些表单对象属性的选择器就不说了 。。。

=============================================================