jQuery

一、jQuery 的下载和安装

下载

jQuery

安装

在页面引入即可<script src="js/jquery.js" type="text/javascript" ></script>

二、jQuery 核心

"$"

"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象

三、DOM 对象和 jQuery 包装集对象

Uncaught ReferenceError: $ is not defined 报错原因：

1、没有引入jquery文件

2、引入的jquery文件顺序不对

DOM对象转 Jqyery包装集对象

将DOM对象放到$()括号中

// 得到DOM对象

var mydivDom = document.getElementById("mydiv");

// 得到Jquery包装集对象

var mydivJquery = $("#mydiv");

Jqyery包装集对象转DOM对象

Jqyery包装集取下标 Jqyery包装集[0]

/*Jqyery包装集对象转DOM对象*/

ar jtod = mydivJquery[0];

通过each()方法遍历 jQuery

对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象

mydivJquery.each(function(index,element){ })

四、jQuery 选择器

1. 基础选择器 Basics

id 选择器

$("#testDiv")选择 id 为 testDiv 的元素（id属性值）

元素名称选择器

$("div")选择所有 div 元素 （元素名称）

类选择器

$(".blue")选择所有 class=blue 的元素 （class属性值）

选择所有元素

$("*")选择页面所有元素

子主题 5

$("#testDiv,span,.blue")同时选中这几个选择器匹配的元素

2.层次选择器 Hierarchy

后代选择器

$("#parent div")选择 id 为 parent 的元素的所有 div 元素

子代选择器

$("#parent>div")选择 id 为 parent 的直接 div 子元素

相邻选择器

$(".blue + img")选择 css 类为 blue 的下一个 img 元素

1、只找当前元素的下一个同级

2、只找一个

同辈选择器

$(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

3.表单选择器

元素选择器

var inputs = $("input");

表单选择器

var inps = $(":input");

获取所有的复选框

var cks = $(":checkbox");

过滤选择器

console.log($("input:checkbox"));

:checked:得到所有checked为true的元素

:eq(index):匹配指定下标的元素

:gt(index):大于指定下标的

:odd 获取所有的奇数位置的元素

:even 获取所有的偶数位置的元素

五、jQuery DOM 操作

1. 操作元素的属性

获取属性

attr(属性名称)

获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined

prop(属性名称)

获取具有 true 和 false 两个属性的属性值

设置属性

attr("属性名","属性值")

prop("属性名","属性值")

移除属性

removeAttr("属性名")

attr()与prop()的区别：

共同点：

都可以获取元素的属性

不同点：

1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）

2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false

如何选择：

如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）

如果是非boolean类型，则使用attr()方法

2.操作元素的样式

attr("class")

获取 class 属性的值，即样式名称

attr("class","样式名")

修改 class 属性的值，修改样式

attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖

addClass("样式名")

添加样式名称

addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准

css()

添加具体的样式

设置一个样式

$("#remove").css("color","red");

同时设置多个

$("#remove").css({"font-weight":700,"height":"200px"});

css():设置具体的样式（设置行内样式，写在style属性中的样式）

removeClass(class)

移除样式名称

3.操作元素的内容

html()

获取元素的 html 内容

html("html 内容")

设定元素的 html 内容

text()

获取元素的文本内容，不包含 html

text("text 内容")

设置元素的文本内容，不包含 html

val()

获取元素 value 值

val(‘值’) 设定元素的 value 值

html()和text()

html()可以识别数据中的html标签并 显示出来；

text()不识别html标签，会当做纯文本显示

取值时，html()能够获取到元素中的html代码，text()只会获取纯文本

表单元素：取值赋值使用 val()

文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等

非表单元素：取值赋值使用 html()和text()

div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

4.创建元素、添加元素

创建元素

$(‘元素内容’)

添加元素

prepend(content)

在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记

$(content).prependTo(selector)

把 content 元素或内容加入 selector 元素开头

append(content)

在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记

$(content).appendTo(sector)

把 content 元素或内容插入 selector 元素内，默认是在尾部

before()

在元素前插入指定的元素或内容:$(selector).before(content)

after()

在元素后插入指定的元素或内容:$(selector).after(content)

5.删除元素、遍历元素

remove()

删除所选元素或指定的子元素，包括整个标签和内容一起删

empty()

清空所选元素的内容

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element 是当前的元素，此时是 dom 元素。

六、Jquery 事件

1. ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

2. bind()绑定元素事件

简单的 bind()事件

$(selector).bind( eventType [, eventData], handler(eventObject))

绑定多个事件

$("#upwd").bind("blur",function(){

console.log("....");

}).bind("focus",function(){

console.log("。。。");

});

$("#upwd").bind({

"blur":function(){

console.log("失焦...");

},

"focus":function(){

console.log("聚焦。。。");

}

});