JavaScript和jquery

最新推荐文章于 2022-01-07 20:29:54 发布

Chenyang_lm

最新推荐文章于 2022-01-07 20:29:54 发布

阅读量211

点赞数

文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/Chenyang_lm/article/details/119984768

版权

JavaScript DOM jQuery 事件处理选择器

关键词由CSDN通过智能技术生成

JavaScript
1.获取元素（节点对象）的方式：
（1）通过id获取节点对象：var a = document.getElementById(“id属性值”);
① 因为id名是唯一的，所以获取的结果a也是唯一的，可以直接拿来操作
（2）通过类名（class）获取节点对象：var b = document.getElementsByClassName(“class属性值”);
① 类名不是唯一的，所以获取的结果b是一个伪数组，里面保存着被选中的所有节点对象，如果要操作某个节点对象需要通过索引(如：b[0])去选中它
② 如果需要对伪数组中的所有节点对象进行同样的操作，可以使用for循环遍历该伪数组：
for(var i = 0; i <= b.length;i++) { … }
（3）通过标签名（Tag）获取节点对象：var c = document.getElementsByTagName(“标签名”);
用法与类名获取相同
2. 输出的方式：
① console.log() 输出到控制台
② alert() 弹出框/警示框输出
③ document.write() 输出到页面，可以识别标签
3. 输入的方式：
prompt(“输入提示语”)

4.获取表单中的value值：

第一步：获取input节点对象
var i = document.getElementById(”ipt”);
第二步：获取节点对象的value值
i.value;
第三步：修改节点对象的value值(重新赋值)
i.value = ”456”;
5. 修改元素内容：

<p class=”a”>123</p>

第一步：获取p节点对象
	var txt = document.getElementsByClassName(”a”)[0];
第二步：获取元素内容 / 获取标签和元素内容
	txt.innerText()  / txt.innerHTML()
第三步：修改元素内容            / 修改标签和元素内容(重新赋值)
	txt.innerText() = ”456”;  / txt.innerHTML() = ”<h1>456</h1>”;

6.修改/添加样式属性：

<p class=”a”>123</p>

第一步：获取p节点对象
	var txt = document.getElementsByClassName(”a”)[0];
第二步：修改/添加节点对象的样式属性（如果color属性存在就修改，如果不存在就添加）
	① txt.style.color = ”red”;
	② txt.setAttribute(”style”,”color:red;”);    实质上就是为p元素添加了行内样式
	补充：setAttribute(”标签属性名”,”标签属性值”):该方法可以为一个标签添加/修改样式属性
		   getAttribute(”标签属性名”)：该方法可以获取一个标签的属性值

增加节点：

<div>123</div>                          
<div>123<p>456</p></div>

第一步：获取div标签
	var b = document.getElementsByTagName("div")[0];
第二步：新建一个p节点
	var n = document.createElement("p");
第三步：将新建的p节点追加到div节点中      父元素.appendChild(要添加的子元素);
	b.appendChild(n);
第四步：新建一个文本节点
	var t = document. createTextNode("456");
第五步：将文本节点追加到p节点中
	n.appendChild(t);

删除节点：

<div id=”a”>123<p>456</p></div>

第一步：获取div标签
	var c = document.getElementById(”a”);
第二步：获取p标签
	var d = document.getElementsByTagName(”p”)[0]; 
第三步：移除div标签中的p标签       父元素.removeChild(要删除的子元素);
	c.removeChild(d);

事件：
① 第一种写法（在js代码中绑定事件）：节点对象.事件类型 = function () {};
② 第二种写法（在DOM中绑定事件）：为标签添加事件属性；
③ 第三种写法（事件监听）：节点对象.addEventListener(‘事件类型’,function (){});
事件类型：
① onclick 点击事件
② onfocus 获取焦点事件
③ onblur 失去焦点事件
④ onsubmit 提交事件 ⑤ onload 页面加载完成事件
补充：js的入口函数（所有js代码都写到该函数中）：
window.onload = function() { … }
定时器函数：
① var timer = setInterval(函数，时间); // 时间的单位是ms,重复执行
clearInterval(timer); // 清除定时器函数
② var timer = setTimeout(函数, 时间); // 时间的单位是ms,只执行一次
clearTimeout(timer); // 清除定时器函数
Date内置对象：
① 获取当前时间
var now = new Date();
② 获取当前时间的年、月、日：now. getFullYear() now.getMonth()+1 now. getDate()
③ 获取当前时间的时、分、秒：now. getHours() now. getMinutes() now. getSeconds()
jQuery
jQuery是一个轻量级的js库，不是框架
jQuery实质上就是一个js文件，使用时需要引入HTML文档，先引入后使用
jQuery选择器：
① 通过标签名获取元素： $(”标签名”)
② 通过类名获取元素： $(”.类名”)
③ 通过id名获取元素： $(”#id名”)
④ 获取div下的所有p： $(”div p”)
(提示：这里的选择器和CSS选择器类似)
增加节点：

<div>123</div>                          
<div>123<p>456</p></div>
	$(”div”).append(”<p>456</p>”);

删除div元素及其以下的所有子元素（包含div）： $(”div”).remove();
删除div以下的所有子元素（不包含div）： $(”div”).empty();
获取/修改元素内容：
(1) html()
① 获取： $(”#a”).html() ② 修改： $(”#a”).html(”修改文本+标签”)
(2) text()
① 获取： $(”#a”).text() ② 修改： $(”#a”).text(”只能修改文本”)
获取/修改元素标签属性：
① 获取： $(”#a”).attr(”属性名”);
② 修改： $(”#a”).attr(”标签属性名”,”属性值”); 如果该标签属性存在就修改，不存在就添加
修改元素样式：
① $(”#a”).css(”样式属性名”,”属性值”); 如果该样式属性存在就修改，不存在就添加
获取/修改表单元素的value值：
① 获取： $(”#a”).val();
② 修改： $(”#a”).val(”需要设置的值”);
事件：
① 第一种写法： $选择器”).事件类型(function() { … }) ② 第二种写法：$ (”选择器”).bind(”事件类型”,function() { … })
事件类型：
① click 点击事件 ② focus 聚焦事件 ③ blur 失焦事件 ④ submit 提交事件
jQuery入口函数：
① $(function(){ js代码 })
② $(document).ready(function(){ … })
jQuery常用动画方法：
① 隐藏 $(”#a”).hide(); 显示 $(”#a”).show();
② 滑动隐藏 $(”#a”).slideDown(); 滑动显示 $(”#a”).slideUp();
③ 淡入已隐藏的元素(显示) $(”#a”).fadeIn(); 淡出可见元素(隐藏) $(”#a”).fadeOut();