jQuery介绍

[基于达内教育的学习,总结提炼]

一. jQuery概述

1.1.jQuery是什么

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。

1.2.jQuery的优势

可以简化JavaScript代码

可以像css那样获取元素

可以修改css来控制页面效果

可以兼容常用的浏览器

1.3.jQuery引入

与引入普通js文件一样

二.jQuery语法

2.1.$介绍

$符号等价于jQuery, 是jQuery单词的简写

2.2.文档就绪事件

所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：

$(document).ready(function(){

        //xxxx

});

该函数会在整个html文档加载完之后立即执行! 其作用相当于:

window.onload = function(){ //xxx  }

其简写形式为:

$(function(){

        //xxxx

});

2.3.Dom对象和jQuery对象的转换

JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。

2.3.1.dom对象转jQuery对象:

var dom = document.getElementById("username");

var $jQuery= $(dom );   // js对象转成jQuery对象

2.3.2.jQuery对象转dom对象:

var $jQuery = $("#username");

//方式一:

var dom1 = $jQuery[0];    // jQuery对象转成js对象

//方式二:

var dom2 = $jQuery.get(0);    // jQuery对象转成js对象

三.jQuery选择器

3.1.基本选择器

3.1.1.元素名选择器

$("div") – 匹配所有的div元素

3.1.2.class选择器

$(".c1") – 匹配所有class值为c1的元素

$("div.c1") – 匹配所有class值为c1的div元素

3.1.3.id选择器

$("#d1") – 匹配所有id值为d1的元素

$("div#d1") – 匹配所有id值为d1的div元素

3.1.4.*号匹配符

$("*") – 匹配所有的元素

3.1.5.多元素选择器

$("div,span,#d1,.c1") – 匹配所有的div/span元素以及id值为d1的元素和class值为c1的元素

3.2.层级选择器

如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

$("div span") – 匹配div下所有的span元素

$("div>span") – 匹配div下所有的span子元素

$("div+span") – 匹配div后面紧邻的span兄弟元素

$("div~span") –匹配div后面所有的span兄弟元素

$("#two").siblings("div") –匹配id=two 的元素所有 <div> 兄弟元素

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

next() 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落.

nextAll() 查找第一个 div 之后的所有类名，并为他们添加类名.

parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

 3.3.基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 ":" 开头

$("div:first") – 匹配所有div中的第一个div元素

$("div:last") – 匹配所有div中的最后一个div元素

$("div:even") – 匹配所有div中索引值为偶数的div元素，0开始

$("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始

$("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始

$("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始

$("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始

$("div:not(.one)") – 匹配所有class值不为one的div元素

3.4.内容选择器

$("div:contians('abc')") – 匹配所有div中包含abc内容的div元素

如: <div>xxxabcxx</div>

$("div:has(p)") – 匹配所有包含p元素的div元素

如: <div><p></p></div>

$("div:empty") – 匹配所有内容为空的div元素

如: <div></div>

$("div:parent") – 匹配所有内容不为空的div元素

如: <div>xxxxx</div>

3.5.可见选择器

jQuery中的可见性:

$("div:hidden") – 匹配所有隐藏的div元素

$("div:visible") – 匹配所有可见的div元素

jQuery中的效果:

show() - 如果被选元素已被隐藏，则显示这些元素。

hide() - 如果被选的元素已被显示，则隐藏该元素。

toggle() - 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。3.6.属性选择器

$("div[id]") – 匹配所有具有id属性的div元素

$("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素

$("div[id!='d1']") – 匹配所有id属性值不为d1的div元素

$("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素

$("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素

3.7.子元素选择器

$("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。

$("div:first-child") –匹配div中第1个子元素。

$("div:last-child") –匹配div中最后一个子元素

3.8.表单选择器

$(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。

$(":password") – 匹配所有的密码框

$(":radio") – 匹配所有的单选框

$(":checkbox") – 匹配所有的复选框

$(":checked") – 匹配所有的被选中的单选框/复选框/option

$("input:checked") – 匹配所有的被选中的单选框/复选框

$(":selected") – 匹配所有被选中的option选项

四. 文档操作

parent()

$("#d1").parent() – 获取id为d1元素的父元素

parents()

$("#d1").parents() – 获取id为d1元素的祖先元素

$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素

next()

$("div").next() – 获取所匹配元素后面紧邻的兄弟元素

$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素

nextAll()

$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素

$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素

prev()

$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素

$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素

prevAll()

$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素

$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素

siblings()

$("div").siblings() – 获取所匹配元素前后所有的兄弟元素

$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素

find()

$(“#div”).find("span") – 获取所匹配元素后代中的所有span元素

each()

each(function(){ }) – 遍历选中元素

$("<p>abc</p>") – 创建一个游离的p元素。

append()

$("div").append("<span>abc</span>") –为所匹配元素追加一个span子元素

remove()

$("div").remove() – 删除所匹配元素

html()

$("div").html() – 获取所匹配元素的html内容

$("div").html("xxx") – 为所匹配元素设置html内容

text()

$("div").text() – 获取所匹配元素的文本内容

$("div").text("xxx") – 为所匹配元素设置文本内容

attr()

$("div").attr("id") – 获取所匹配元素的id属性值

$("div").attr("id", "xx") – 为所匹配元素设置id属性

css()

$("div").css("width") – 获取所匹配元素的width样式属性值

$("div").css("width", "200px") – 为所匹配元素设置width样式属性

$("div").css({"width":"200px", "color":"red","font-size":"24px" }) ;       – 为所匹配元素设置width样式属性

五. 事件

click()

$("div").click(function(){}) – 为所匹配元素绑定点击事件

blur()

$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

focus()

$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

change()

$("select").change(function(){}) – 为所匹配元素绑定选项切换事件

ready()

$(document).ready(function(){}) – 文档就绪事件

其作用相当于:  window.onload = function(){}

简写形式为:

$(function(){}) – 在整个文档加载完成后立即执行

六. 效果

show()

$("div").show() – 将隐藏元素设置为显示(底层操作的是display);

hide()

$("div").hide() – 将显示元素设置为隐藏(底层操作的是display);

toggle()

$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.

七. json

7.1.json是什么?

json是JavaScript提供的一种轻量级数据交换(存储)格式

创建JS对象:

var person = {

        "name":"张飞",

         "age": 18,

         "gender": "男"

}

7.2.json语法

{}括起来的就是一个对象

* json的属性名只能用双引号引起来, 不能用单引号!

* json的属性值:

        数字（整数或浮点数）

        字符串（在双引号中）

        逻辑值（true 或 false）

        数组（在方括号中）

        对象（在花括号中）

        null

7.3.json和xml比较

* 可读性: xml比json具有更好的可读性

* 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析

* 流行度: xml虽然发展了很多年, 但是由于json易于操作, 所以在某些场景中json比xml更常用.

7.4.json格式:

格式一:

var p1 = {

        "name" : "意缘",

        "age" : 21,

        "gender" : "男"

}

格式二

var p2 = {

        "name" : "智垚",

        "age" : 20,

        "gender" : "男",

        "friends" : ["赵地","守鑫","艺博"],

        "gf" : {

              "name" : "空",

               "age" : "17",

               "gender" : "女"

         }

}

格式三

var p3 = {

             "name" : "程竣",

             "age" : 20,

             "gender" : "男",

             "friends" : [

             {

                   "name" : "永开",

                    "age" : 20,

                    "gender" : "男"

              },

              {

                       "name" : "正阳",

                        "age" : 19,

                        "gender" : "男"

                },

               {

                          "name" : "敏涛",

                           "age" : 21,

                           "gender" : "男"

                }

                ]

}