jquary 和dom操作

最新推荐文章于 2024-02-28 16:51:01 发布

pythondafahao

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量222

点赞数

分类专栏： js 基础

本文链接：https://blog.csdn.net/pythondafahao/article/details/79263199

版权

js 基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、外部对象

1、BOM - window

2、DOM - document

2、window

1、常用属性

1、document

2、history

forward()

back()

go(num)

3、location

1、href

2、reload()

4、screen

1、width / height

2、availWidth / availHeight

5、navigator

userAgent

2、对话框

1、警告框 - alert()

2、输入框 - prompt()

3、确认框 - confirm()

3、定时器

1、周期性定时器

var timer = setInterval(fun,time);

clearInterval(timer);

2、一次性定时器

var timer = setTimeout(fun,time);

clearTimeout(timer);

3、document

1、DOM对节点的操作

1、查找节点信息

2、读取节点信息

3、修改节点信息

4、创建节点

5、删除节点

2、查找节点的信息

1、通过id查找

var elem = document.getElementById("id");

2、根据标签名称查找

var arr = document|elem.getElementsByTagName("tagName");

3、根据class名称查找

var arr = document|elem.getElementsByClassName("className");

4、根据name名称查找

var arr = document|elem.getElementsByName("name");

5、根据层级关系查询

1、parentNode

返回父节点

2、childNodes

返回所有子节点的数组

注意：

会包含元素节点，文本节点，注释节点

3、读取节点信息

1、读取节点类型

属性：nodeType

值：

返回1：元素节点

返回2：属性节点

返回3：文本节点

返回8：注释节点

返回9：文档节点

2、读取节点名称

属性：nodeName

值：

元素节点和属性节点：标签名或属性名

文本节点：#text

文档节点：#document

注释节点：#comment

3、读取或设置元素的值

1、innerHTML

读取或设置元素的HTML文本值

2、innerText

读取或设置元素的普通文本值

4、读取或设置元素节点的属性

1、getAttribute("attrName")

2、setAttribute("attrName","value");

3、removeAttribute("attrName");

4、elem.属性名;

var div = document.getElementById("d1");

div.id = "";

div.align = "left";

div.class=""; //错误

div.className = ""; //正确

5、元素节点的样式操作

1、elem.setAttribute("class","值");

为元素增加class属性

2、elem.className = "className";

为元素增加class属性

3、elem.style.css属性=值;

如果css属性中包含"-",要去掉"-"，且后面的首字符变大写

elem.style.borderRightColor="red";

================================================

1、DOM

1、增加节点

1、创建元素节点

语法：

var elem=document.createElement("元素名");

2、增加节点

将创建好的元素增加到页面中

1、document.body.appendChild(elem);

向body中追加elem的新元素

2、parentNode.appendChild(elem);

将elem追加到指定元素的内部

parentNode：表示页面上的任何一个元素节点

3、parentNode.insertBefore(newElem,oldElem)

将newElem元素插入到parentNode中oldElem之前

2、删除节点

1、删除body的子元素

document.body.removeChild(elem);

在body中删除 elem 元素节点

2、删除其他元素的子元素

parentNode.removeChild(elem);

在parentNode中删除 elem 元素

2、事件

1、什么是事件

通过用户的行为来激发的操作

2、触发事件的行为

为html元素绑定事件时，需要在事件名称前加 on

1、鼠标事件

click : 鼠标单击事件

dbclick : 鼠标双击事件

mouseover : 鼠标移入进元素时的事件

mousemove : 鼠标在元素移动时的事件

mouseout : 鼠标移出元素时的事件

mousedown : 鼠标按下时的事件

mouseup : 鼠标抬起时的事件

2、键盘事件

keydown : 键位按下时的事件

keypress: 键位按下时的事件

keyup : 键位抬起时的事件
3、状态改变事件
load : 元素加载完成时触发
change : 当元素发生改变时触发
focus : 当元素获取焦点时的事件
blur : 当元素失去焦点时的事件
submit : 表单被提交时的事件
3、绑定事件的方式
1、在元素中绑定事件
<ANY on事件名="js脚本/函数">
2、在js中动态的为元素绑定事件

<script>

var div = $("d1");

div.on事件名 = function(){

}

</script>
4、事件行为

1、load事件
在元素加载完毕时，才执行的操作

1、<body οnlοad="">
2、JS中动态绑定

window.onload = function(){
}

注意：window.onload 事件是在整个网页加载完成时再回来调用的(此时页面的内容都已经被渲染完毕了)

2、submit事件

功能：在表单被提交时触发

注意：需要通过一个返回值，通知该事件，表单是否要被提交

返回值：true，可以提交表单

返回值：false，则不能提交表单

5、事件对象 (event对象)

1、什么是事件对象

任何一个事件在触发后，都会产生一个event对象

event对象中会包含一些与当前事件相关的信息：事件源，鼠标所在的位置，按下的键位 ... ...

2、获取event对象

1、html元素中绑定事件

<ANY οnclick="btn_click(event)">

<script>

function btn_click(event){

//event表示事件对象

}

</script>

2、使用JS动态绑定事件

<script>

var d1 = $("d1");

d1.οnclick=function(event){

event 表示的事件对象

}

</script>

3、事件对象的常用属性

1、事件源

1、什么是事件源

触发当前事件的元素是谁

2、如何获取事件源

通过 event.target 获取事件源

得到一个 DOM对象

2、针对鼠标事件的属性 - offsetX、offsetY

获取鼠标在元素上的坐标点

以元素的左上角为(0,0)进行计算的

3、针对鼠标事件的属性 - clientX、clientY

获取鼠标在网页上的坐标点

以文档的左上角为(0,0)进行计算的

4、针对鼠标事件的属性 - screenX、screenY

获取鼠标在显示器上的坐标点

以显示器的左上角为(0,0)进行计算的

5、键盘事件 & 事件对象

keypress

keydown

keyup

1、键盘事件对象的属性

1、event.key

得到按下的字符

2、event.which

得到按下的字符的ASCII码(每个字符都各不相同)

注意：

1、在keypress中

表示的每个字符的ASCII码(英文的大小写，符号，数字都不相同)

2、在keydown中

表示键位码，只记录键位，并不记录字符(大小写英文的键位码是一致的，数字与一些标点也是一致的)

4、事件冒泡

1、什么是事件冒泡

当激发子元素的事件时，把父元素对应的事件也给执行了

场合：

1、必须是父子元素或具备层级关系的元素

2、必须都设置了相同的事件

2、阻止事件冒泡

只让事件在当前元素中执行，不向上冒泡

event.stopPropagation()

3、jQuery

---------------------------------------------------------------------------
1、jQuery的简介

是一个轻量级的JS库-是一个被封装好的JS文件，提供了更为简便的页面元素的操作方式
封装了DOM，CSS，JS
核心理念：Write Less Do More
jQuery版本：
jQuery 2.x，不再兼容IE6,7,8
jQuery 1.11.x
2、使用jQuery
1、引入jQuery文件
<script src="jquery-1.11.3.js"></script>
注意：引入文件的操作要放在其他jQuery操作之前
2、使用jQuery的操作
... ...
3、jQuery对象
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的操作都只针对jQuery对象，并不针对其他对象(DOM)

2、工厂函数
想要获取jQuery对象的话，必须使用工厂函数-$()
在$()中要传递一个选择器，会返回一个选择器所对应的jQuery对象/数组
3、DOM对象和jQuery对象之间的转换
DOM对象：是以DOM的方式获取出来的节点对象，只能访问DOM中所提供的方式和属性，不能访问jQuery提供的方法和属性。
jQuery对象：是由jQuery来封装的对象，只能访问jquery提供的属性和方法，不能访问DOM的内容
1、将DOM对象转换为jQuery对象
语法：var jQuery对象 = $(DOM对象);
注意：所有的jQuery对象在起名的时候，最好在变量名称前 + $
var $d1 = $(d1);
2、将jQuery对象转换为DOM对象
1、var dom对象 = jQuery对象.get(0);
2、var dom对象 = jQuery对象[0];

作业：

使用change事件和 select 完成省市级联的联动效果

var province = ["黑龙江","吉林","辽宁"];

var city = [

["哈尔滨","齐齐哈尔","牡丹江"],

["长春","吉林","四平"],

["沈阳","大连","鞍山"]

];

1、网页加载完成时，将province中的信息显示在<select>中

2、当 province 的下列表在改变时，动态创建一个select，显示对应的城市信息

pythondafahao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquary 和dom操作

1、外部对象1、BOM - window2、DOM - document2、window1、常用属性1、document2、historyforward()back()go(num)3、location1、href2、reload()4、screen1、width / height2、availWidth / availHeight5、navigatoruserAgent2、对话框1、警告框 - ...
复制链接

扫一扫

专栏目录