首页  思维导图  详情

jQuery-大鹏

2019-11-27 17:20:00   0  举报





仅支持查看

AI智能生成

Jquery

JQuery

jQuery中的DOM操作

jquery 基础

作者其他创作

大纲/内容

背景知识

目的：简化JavaScript开发

特点

写的少，做得多（Write less Do More）

兼容各大浏览器（Chrome、Firefox、Safari、IE8.0>）

能完成较高难度的富客户端页面

作用：预封装很多对象和函数

历史

曾经是一个优秀的轻量级javascript类库

是由John Resig在2006年1月创建的开源项目

jQuery 2.x版本不再支持IE 8及之前版本

使用步骤

在head中放置单独的JS脚本

在HTML页面中引入jQuery文件

使用jQuery的选择器定位HTML页面元素

使用jQuery提供的API方法完成需求

JQuery对象

DOM对象

通过DOM获取到的HTML元素就是DOM对象

JQuery对象

通过jQuery包装DOM对象后产生的对象

jQuery底层还是DOM对象

jQuery对象转换为DOM对象

使用get(index)方法

jQuery对象是类数组对象

DOM对象转换为jQuery对象

$(DOM对象)

约定

通过jQuery所得到的对象，使用“$”符号标识

在jQuery中，“$”符号等同于“jQuery”

若冲突可以用语义释放

var jQ = jQuery.noConflict();

选择器

基本内容

用法

类似于CSS选择器

作用

定位HTML页面元素

特点

将HTML页面中的内容与行为分离

注意

JQuery选择器是JQuery内容的根本

优势

简介的写法

兼容CSS样式

完善的处理机制

AJAX操作

链式操作

工厂函数

写法

$()

作用

使用选择器

包装DOM

基本选择器

用法

$("#test").hide()

说明

返回HTML页面中id属性值的元素

class

用法

$(".test").hide()

说明

返回HTML页面中class属性值为className的元素

元素

用法

$("p").hide()

说明

返回HTML页面中元素名为elementName的元素

通配符

用法

$("*")

说明

返回HTML页面中所有元素

合并

用法

$("selector1, selector2, ...")

说明

返回每个选择器匹配的元素合集

注意

每一个选择器之间使用“,”隔开

该选择器返回的结果为并集

层次选择器

祖先与后代选择器

用法

$("selector1 selector2")

说明

返回selector1元素中后代为selector2的元素

父与子选择器

用法

$("selector1 > selector2")

说明

返回selector1元素中子元素为selector2的元素

下一个兄弟选择器

用法

$("selector1 + selector2")

说明

返回selector1元素的下一个兄弟元素为selector2的元素

注意

该选择器返回的是指定一个元素，但格式为类数组

后面所有兄弟选择器

用法

$("selector1 ~ selector2")

说明

返回selector1元素后面为selector2的兄弟元素

注意

该选择器返回的是指定元素的后面指定元素

过滤选择器

基本内容

作用

通过指定过滤规则过滤指定范围内的元素

特点

过滤选择器的前缀为“:”

基本过滤

:first

返回第一个元素

:last

返回最后一个元素

:even

返回索引值为偶数的元素

:odd

返回索引值为奇数的元素

:eq(index)

返回索引值为index的元素

:gt(index)

返回索引值大于index的元素

:lt(index)

返回索引值小于index的元素

:not(selector)

返回不包含指定选择器匹配的元素

内容过滤

:contains(text)

返回文本内容包含text的元素

:empty

返回不包含子元素或文本元素的元素

:parent

返回包含子元素或文本元素的元素

:has(selector)

返回包含指定选择器匹配的元素的元素

可见性过滤

:hidden

返回不可见的元素

:visible

返回可见的元素

属性过滤

[attribute]

返回具有attribute属性的元素

[attribute=value]

返回具有attribute等于value的元素

[attribute!=value]

说明

返回具有attribute不等于value的元素

注意

该选择器包含没有该属性的元素

[attribute^=value]

返回具有attribute是以value开始的元素

[attirbute$=valule]

返回具有attribute是以value结束的元素

[attribute*=value]

返回具有attribute包含value的元素

[selector1][selector2]...

说明

返回同时匹配所有属性过滤选择器的元素

注意

该选择器的结果为交集

表单对象属性过滤

:enabled

返回可用的元素

:disabled

返回不可用的元素

:checked

返回单选框或复选框被选中的元素

:selected

返回下拉列表中被选中的元素

表单选择器

:input

返回input、select、textarea和button元素

:text

返回单行文本框

:password

返回密码框

:radio

返回单选框

:checkbox

返回复选框

:submit

返回提交按钮

:image

返回图像按钮

:reset

返回重置按钮

:button

返回所有按钮

:file

返回上传域

DOM

基本操作

内容操作

html()

用法

$("#test").html();

$("#test2").html("<b>Hello world!</b>");

说明

读取或修改指定元素的HTML内容

类似于innerHTML属性的作用

val()

用法

$("#test").val();

$("#test3").val("Dolly Duck");

说明

读取或修改指定元素的value属性值

text()

用法

$("#test").text();

$("#test1").text("Hello world!");

说明

读取或修改指定元素的文本内容

类似于textContent属性的作用

属性操作

attr()

用法

$(“#test”).attr("href");

$("#w3s").attr("href","http://www.deepe.ren/jquery");

说明

读取或修改指定元素的属性值

removeAttr()

用法

$(“#test”).removeAttr("href");

说明

删除指定元素的属性值

样式操作

$("p").css({"background-color":"yellow","font-size":"200%"});

attr

语法

attr("class", className)

说明

读取或修改指定元素的class属性值

addClass

语法

addClass(className)

说明

为指定元素追加样式

removeClass

语法

removeClass(className)

说明

删除指定元素的指定样式

注意

removeClass()
删除指定元素的所有样式

toggleClass

语法

toggleClass(className)

说明

在没有样式和指定样式之间切换

hasClass

语法

hasClass(className)

说明

判断是否包含ClassName样式（返回Boolean值）

css

语法1

css(attrName)

说明：只能设置一个CSS属性

语法2

css(attrName, attrValue)

说明：只能设置一个CSS属性

语法3

css( {key : value} )

说明：可以设置多个CSS属性

节点操作

创建节点

通用方式

$(HTML代码)

节点方式

元素节点

$("")

文本节点

text(textContent)

属性节点

attr(attrName, attrValue)

插入节点

$("img").after("Some text after");

$("img").before("Some text before");

append()

用法

$("p").append("Some appended text.");

说明

append后面的元素插入在append前面的元素的后面

prepend()

用法

$("p").prepend("Some prepended text.");

说明

prepend后面的元素插入在prepend前面的元素的前面

appendTo()

用法

说明

appendTo前面的元素插入在appendTo后面的元素的后面

prependTo()

用法

说明

prependTo前面的元素插入在prependTo后面的元素的前面

删除元素

$("p").remove(".italic");

$("#div1").empty();

遍历

祖先

$("span").parent();

返回指定元素的父级元素（一个）

$("span").parents("ul");

返回指定元素的所有父级元素（多个）

$("span").parentsUntil("div");

返回span的父级元素（包括本身），截止到div标签（中间的）

后代

$("div").children();

返回指定元素的直接子元素（一级）

$("div").children("p.1");

返回指定元素的指定selector的所有子元素

$("div").find("span");

返回指定元素的指定selector的后代元素

同胞

上一个同胞

prev()

返回上一个兄弟元素

prevAll()

返回上面所有的兄弟元素

下一个同胞

$("h2").next();

返回下一个兄弟元素

$("h2").nextAll();

返回下面全部兄弟元素

$("h2").nextUntil("h6");

返回下一个兄弟元素直到h6

上下同胞

$("h2").siblings();

返回指定元素的所有的兄弟元素

$("h2").siblings("p");

返回指定元素的所有指定selector的兄弟元素

过滤

$("div p").first();

$("div p").last();

$("p").eq(1);

$("p").filter(".intro");

$("p").not(".intro");

动画

隐藏/显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

淡入淡出

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

滑动

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

动画

$(selector).animate({params},speed,callback);

队列功能

编写多个 animate() 调用

停止

$(selector).stop(stopAll,goToEnd);

回调函数Callback

Callback 函数在当前动画 100% 完成之后执行

chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

事件

鼠标事件

click

dbclick

mouseenter

mouseleave

mousemove

hover

键盘事件

keydown

keyup

keypress

其他事件

focus

blur

change

submit

 收藏

立即使用

营销工具

 收藏

立即使用

《快点》简餐订单时序图

 收藏

立即使用

《快点》预约订单时序图

 收藏

立即使用

PHP学习-大鹏

PO_566902

职业：本科

去主页





0 条评论

下一页

为你推荐

查看更多

