JQuery

Jquery核心

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

通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

DOM对象

通过原生JS方式获取dom对象

Jquery包装集对象

通过Jqueru方式获取Jquery包装集对象

Jquery包装集对象与Dom对象

DOM对象 ——> Jquery对象

$(dom对象)

Jquery对象 ——> DOM对象

取下标：Jquery对象[下标]

注意：

1、如果浏览器报错：$ is not defined

说明是Jquery对象未找到，可能是因为没有引入Jquery核心js文件

2、只有Jquery对象才能使用Jquery方法

基础选择器

选择器                  名称              举例

id选择器            #id属性值        $("#testDiv")选择id为testDiv的元素 （如果出现多个同名ID，只会获取第一个）

元素名称选择器    标签名/标签名        $("div")选择所有div元素

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

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

组合选择器

 选择器1,

选择器2,

选择器3

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

属性选择器

$([属性名])

选择设置过指定属性名的元素

$([属性名=属性值])

选择设置过指定属性名为指定属性值的元素

层次选择器

后代选择器 ancestor descendant （空格）    $("#parent div")选择id为parent的元素的所有div元素

子代选择器 parent > child （大于号）   $("#parent>div")选择id为parent的直接div子元素

相邻选择器 prev + next （加号）

 $(".blue + img")选择css类为blue的下一个img元素 （选择相邻的下一个指定元素）

同辈选择器 prev ~ sibling  （波浪号）

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

表单选择器

:input 选择所有的表单元素，包括input标签、select标签、textarea标签及button标签

:checkbox 选择所有的复选框

:radio 选择所有的单选框

过滤选择器

:checked 选择所有被选中的元素（单选框、复选框、下拉框）

:selected 选择所有被选中的元素 （下拉框）

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

:gt(index) 匹配下标大于指定值的元素

:even 匹配下标是偶数的元素

:odd 匹配下标是奇数的元素

操作元素的属性

attr()与prop()的区别：

1、操作返回值是boolean类型的属性（checked、selected、disabled）

设置了属性：attr()返回的是具体的属性值，而prop()返回的true

未设置属性：attr()返回的是undefined，而prop()返回的false

2、attr()与prop()都可以操作固有属性（固有属性：元素本身拥有的属性）

3、attr()可以操作自定义属性，而prop()不支持

总结：如果属性的返回值是true或false，使用prop()方法；其他属性使用attr()

获取属性

方法 说明 举例

attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked')

attr('name')

prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')

设置属性

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

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

移除属性

removeAttr("属性名")  移除指定属性名

操作元素样式

attr("class") 获取class样式名

attr("class","样式名") 设置class样式名 （会将原本的样式移除，设置新的样式）

addClass("样式名") 添加样式名 （会保留的原有的样式；如果出现相同属性的样式，则以在style标签中后定义的样式名为准）

css("具体样式名","样式值") 添加一个具体的样式  （相当于写在style属性中的样式）

css({"具体样式名":"样式值","具体样式名":"样式值"}) 添加多个具体的样式

操作元素值

Jquery操作元素的值

html()

取值：html()

赋值：html("内容");

获取非表单元素的内容（包含元素中的html标签）

text()

取值：text()

赋值：text("内容");

获取非表单元素的纯文本内容（不包含元素中的html标签）

val()

取值：val()

赋值：val("内容");

获取表单元素的值

JS操作元素的值

innerHTML

取值：innerHTML

赋值：innerHTML = "内容";

获取非表单元素的内容（包含元素中的html标签）

innerText

取值：innerText

赋值：innerText = "内容";

获取非表单元素的纯文本内容（不包含元素中的html标签）

value

取值：value

赋值：value = "内容";

获取表单元素的值

添加元素

创建元素

$("元素内容")

添加元素

方法 说明

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

$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头

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

$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部

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

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

注意：

如果追加的元素不存在，则直接添加；

如果追加的元素存在，则将存在的元素剪切到指定位置。

删除元素

方法 说明

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

empty() 清空所选元素的内容

遍历元素

each()

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

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

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

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

jQuery事件

ready加载事件

ready加载事件类似于onload事件

语法：

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

简写版：

$(function(){});

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

ready事件与onload事件的区别：

这两个方法都是预加载事件，等页面加载完毕后执行的方法。

ready事件：当页面的DOM结构加载完毕后执行

onload事件：当页面的dom结构及页面资源加载完毕后执行

bind绑定事件

bind()绑定元素事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

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

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error 。

[, eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数