Jquery第一章环境的搭建和介绍第一节

jquery的优点

jquery体量小，加载速度快，其本身具有的功能使JavaScript应用程序开发人员的工作变得分外轻松。其中最大的亮点是卓越的DOM查询工具，该工具使用为人熟知的CSS选择器语法。

jquery的功能

jquery的目标是“写更少，做更多”，还有，jquery使跨浏览器web开发变得简单无缝。在以下几方面，jquery的表现堪称出色：

1、通过各种内建的方法，更便捷地使用jquery来迭代和遍历DOM；

2、jquery提供高级的、内置的、通用的使用选择器的功能，就像在CSS中使用一样，因此，使用jquery从DOM中选择条目将更加简单；

3、jquery提供易于理解的插件架构，以便你添加自定义方法；

4、jquery有助于减少导航和UI功能的冗余，如选项卡（tab）、CSS、基于标记的弹出式对话框、动画、过渡以及其他大量效果。

1、可以通过js来操作dom对象：
a) 查：
i. 通过id来获取元素对象：document.getElementById(“id”);
ii. 通过name属性值来获取元素对象：document.getElementsByName(“name”);
iii. 通过标签名来获取元素对象：document.getElementsByTagName(“标签名”);
b) 增：
i. 创建标签元素：document.createElement(“td”);
ii. 创建普通的文件节点：document.createTextNode(“文本字符串”);
iii. 将元素挂载到另外一个元素上：dom对象1.appendChild(dom对象2);
c) 删：父标签dom.removeChild(子dom对象);
d) 修改：
i. dom对象.属性名=属性值；
ii. dom对象.setAttribute(“属性名”,属性值);
2、Jquery：写的更少，做的跟多。减少js代码的书写量，提高效率
a) jquery使用步骤：
i. 需要导入jquery插件

在这里插入图片描述

ii. 测试使用:

在这里插入图片描述

b) jquery的标签选择器：
i. 基本标签选择器：通过jquery来的方法返回的对象是jquery对象

$(“#id”)等价于js中的document.getElementById(“id”):通过指定id值获取标签的jquery对象
$(“input”)等价于js中的document.getElementsByTagName(“input”);
$(“.div1”)通过class来取标签的dom对象
将jquery对象转成dom对象：
将dom对象转成jquery对象：

ii. 属性标签选择器：

iii. 层次标签选择器：
iv. 过滤选择器：$(“ : ”);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="Assets/js/jquery-1.8.3.min.js"></script>
    <title>Document</title>
    <script>
   //原生的Js代码
	//var usernameEle = document.getElmentById("username");
	//通过jquery来获取usenrame
	var usEle = $("#username");//document.getElmentById("");
	var usValue = usEle.val();
	alert(usValue);
    </script>
</head>
<body>
用户名：<input type="text" id="username" name="username">
<input type="button" value="测试jquery">


</body>
</html>

Jquery第一章环境的搭建和介绍第一节

猜你喜欢