jquery基础

 

1.jQuery是什么？

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

2.jQuery 入口函数:

第一种
$(document).ready(function(){
        //执行代码
});
第二种
$().ready(function(){
       //执行代码
});
第三种
$(function(){
      //执行代码
});

3.JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}或
onload = function () { //也可以运行
    // 执行代码
}

4.jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

5.jQuery与js区别：

      jquery有一层功能皮肤，其内核还是js

6.js与jQuery之间的转换

（1）js对象转成jQuery对象：$(js对象)

        js=> jQuery

        jQuery=$(js/dom);

        jQuery=$(div);

        jQuery=$("<li>列表</li>");

$(function(){
         var div=document.querySelector(".div");
         var $div=$(div);
         var $div=$(".div");
});

（2）jquery对象转换成js对象：jquery对象[索引值]  或 jquery对象.get(索引值)   

jQuery=> js

js=jq[0]

js=$div[0]

div[0].style.backgroundColor = "black";
div.get(4).style.backgroundColor = "pink";

7.jQuery 选择器: 元素选择器 #id选择器  .class选择器等

   jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

8.jQuery过滤选择器：

$("*")：选取所有元素

$(this)：选取当前 HTML 元素

$("p.intro")：选取 class 为 intro 的 <p> 元素

$("p:first")：选取第一个 <p> 元素

$("p:last")：选择所有p元素的最后一个

$("ul li:first")：选取每个 <ul> 元素的第一个 <li> 元素

$(":button")：选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")：选取偶数位置的 <tr> 元素，选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd")：选取奇数位置的 <tr> 元素

$("td:empty") ：选择所有的为空（也不包括文本节点）的td元素的数组

$("li:eq(2)").css("color","red");  相等 css(属性,值);  eq(2)-》第三行 下标从0开始

$("li:gt(3)").css("color","red"); 大于 

$("li:lt(2)").css("color","green"); 小于

$("li:parent").css("color","green");//选择所有的以li为父节点的元素数组 li里面有内容(空格，文本节点，子元素都算)
$("li:has(span)").css("color","green");//选择所有含有span标签的li元素
$("li:contains(999)").css("color","green"); //选择所有li中含有文本(999)的元素

<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span>999</span></li>
        <li>列表5</li>
        <li>

        </li>
</ul>

 

• $("A B")：查找A元素下面的所有子节点，包括非直接子节点
• $("A>B") ：查找A元素下面的直接子节点

• $("A+B") ：查找A元素后面的兄弟节点，包括非直接子节点
• $("A~B") ：查找A元素后面的兄弟节点，不包括非直接子节点

9.jquery可见性过滤选择器：

$("div:hidden")：选择所有的被hidden的div元素
$("div:visible")：选择所有的可视化的div元素

10.jQuery的点击事件：

$("p").click(function(){
  $(this).hide(); //当前点击的p标签隐藏
});