jQuery笔记（二）常用操作

落日映苍穹つ 2022-04-13 02:54 266阅读 0赞

7、复习DOM操作

获取节点：document.getElementById();/document.getElementsByTagName();/querySelect()/........

创建节点：createElement()/createTextNode/createAttribute

替换节点：replaceChild

删除节点：removeChild

插入节点：appendChild/insertBefore

8、jQuery中的DOM操作

基本操作

①html() - 类似于原生DOM的innerHTML属性

获取 - html()

设置 - html(html代码)

②val() - 类似于原生DOM的value属性

获取 - val()

设置 - val(value)

③text() - 类似于原生DOM的textContent属性

获取 - text()

设置 - text(文本内容)

④attr() - 获取或设置指定元素的属性

获取 - attr(attrName) - 类似于getAttribute()

设置 - attr(attrName,attrValue) - 类似于setAttribute()

⑤removeAttr(attrName) - 类似于removeAttribute()

9、class操作

①attr("class",classValue) - 设置

②addClass() - 追加样式

③removeClass() - 删除样式

不传参 - 删除所有样式

传参 - 删除指定样式

④toggleClass() - 切换样式

只接受一个参数，是在没有样式与指定样式之间切换，没有就新建，有就删除

⑤ hasClass() - 判断样式

判断指定元素是否包含指定样式

10、设置css样式属性 - css()

①设置：.css(name,value)

如果同时设置多个，用对象文字值：’color’：’red’，’first-size’：’12px’,........

属性间用，隔开

②获取：.css(name)

11、遍历节点

parent() - 获取指定节点的父节点

children() - 获取指定节点的所有子节点

next() - 获取指定节点的下一个兄弟节点

prev() - 获取指定节点的上一个兄弟节点

siblings() - 获取指定节点的所有兄弟节点

find(expr) - 在指定节点中查找指定内容

注意 - 查找指定节点的后代节点

$("\#nj").prev().attr("name")获取节点的上一个兄弟节点

$("\#nj").siblings().length  获取节点的所有兄弟节点的个数

$("\#city").find("li").length  获取id为city节点下所有li元素的个数(后代节点)

12、节点

①创建节点

Jquery创建元素节点、属性节点、文本节点都使用$(html)

创建元素节点：$("<li></li>");

创建属性节点：$("<li id='test'></li>");

创建文本节点：$("hello world !");

同时创建：$("<li id='test'>hello world !</li>");

②删除节点

remove() - 删除自身及后代节点

empty() - (清空)删除后代节点,但保留自身节点

③插入节点

内部插入（当做子节点插入）：

append(content|fn)   向每个匹配的元素内部末尾追加内容。

appendTo(content)    把所有匹配的元素追加到另一个指定的元素元素集合末尾。

prepend(content|fn)  向每个匹配的元素内部头部内容。

prependTo(content)   把所有匹配的元素追加到另一个指定的元素元素集合头部

外部插入（当做兄弟节点插入）：

after(content|fn)    向每个匹配元素的后面添加内容

before(content|fn)   向每个匹配元素的前面添加内容

insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后

面。

insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的

前面。

④替换节点

A.replaceWith(B) 方法把被选元素替换为新的内容。B替A

A.replaceAll(B) 方法相反       A替B

$("button").replaceWith($("这也是段落."));

$("<button>按钮</button>").replaceAll($("p"));

⑤复制节点

jQuery - clone(boolean)

boolean参数 - 表示是否复制事件

DOM - cloneNode(boolean)

boolean参数 - 表示是否复制后代节点

例：$("button").clone(true).appendTo($("p"));//复制button按钮,将其追加到p标签中

13、事件

ready() - 类似于window.onload的作用

写法

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

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

$(function()\{\}); //常用

14、ready与onload的区别

ready：具有简写方式

在一个HTML页面中允许多个

等待HTML页面中所有DOM结构加载完毕后就可以执行

onload：没有简写方式

在一个HTML页面中只能一个

必须等待HTML页面中所有内容全部加载完毕后才能执行

15、事件绑定与解绑

①绑定事件  bind(type,data,fn)

type - 指定绑定的事件名称

如果绑定多个事件时,使用空格隔开

data - 可选项,作为event.data属性值传递给事件对象的额外数据对象

fn - 绑定事件的处理函数

②解绑事件unbind(type)

type - 指定解绑的事件名称

默认不传递任何内容 - 即解绑所有事件

指定单个事件名称 - 解绑单个事件

指定多个事件名称 - 解绑多个事件

16、鼠标悬停事件

mouseover()事件是bind('mouseover')的简写方式

$(".d1>h3").bind("mouseover mouseout",function()\{

if($(".d2").is(":hidden"))\{

$(".d2").show(1000);

\}else\{

$(".d2").hide(1000);

\});

$(".d1>h3").mouseover(function()\{

$(".d2").show(1000);

\}).mouseout(function()\{

$(".d2").hide(1000);

\});

17、click()事件是bind('click')的简写方式

18、事件对象(event)

事件对象被封装在事件对应的处理函数的参数

ele.onclick = function(event)\{

event

常用用法

pageX/clientX/offsetX/x - 当前x轴

pageY/clientY/offsetY/y - 当前y轴

target - 当前绑定事件的源对象(元素)

returnValue - 返回值,Boolean类型

return false - 阻止页面的默认行为

which/keyCode/charCode - 键盘对应值

19、事件冒泡

捕获

冒泡

[JQuery中阻止事件冒泡方式及其区别][JQuery]

方式一：event.stopPropagation();

$("\#div1").mousedown(function(event)\{

event.stopPropagation();

\});

方式二：return false;

$("\#div1").mousedown(function(event)\{

return false;3

\});

事件切换

hover(over,out)方法

over - onmouseover事件的处理函数

out - onmouseout事件的处理函数

20、JQuery中的常用事件

<table style="margin-left:-5.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .click() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标单击触发事件，参数可选（data，function） </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .dblclick() </td> 
 <td style="vertical-align:top;width:216pt;"> 双击触发，同上 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .mousedown()/up() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标按下/弹起触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .mousemove() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标移动事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .mouseover()/out() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标移入/移出触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .mouseenter()/leave() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标进入/离开触发事件* </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .hover(func1,func2) </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标移入调用func1函数，移出调用func2函数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .focusin() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标聚焦到该元素时触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .focusout() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标失去焦点时触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> . focus()/.blur() </td> 
 <td style="vertical-align:top;width:216pt;"> 鼠标聚焦/失去焦点触发事件（不支持冒泡） </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .change() </td> 
 <td style="vertical-align:top;width:216pt;"> 表单元素发生改变时触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .select() </td> 
 <td style="vertical-align:top;width:216pt;"> 文本元素被选中时触发事件 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .submit() </td> 
 <td style="vertical-align:top;width:216pt;"> 表单提交动作触发* </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .keydown()/up() </td> 
 <td style="vertical-align:top;width:216pt;"> 键盘按键按下/弹起触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .on() </td> 
 <td style="vertical-align:top;width:216pt;"> 多事件的绑定 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .off() </td> 
 <td style="vertical-align:top;width:216pt;"> 移除事件的绑定 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .trigger(“event”) </td> 
 <td style="vertical-align:top;width:216pt;"> 触发事件event调用 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:216pt;"> .triggerHandler() </td> 
 <td style="vertical-align:top;width:216pt;"> 触发事件，不会冒泡，不会触发默认事件 </td> 
 </tr> 
 </tbody> 
</table>

[JQuery]: https://www.cnblogs.com/dingjing0518/p/6839593.html