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

傷城~ 2022-04-25 06:02 222阅读 0赞

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插件

![在这里插入图片描述][20190507083704432.png]

ii. 测试使用:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]

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

1.  $(“\#id”)等价于js中的document.getElementById(“id”):通过指定id值获取标签的jquery对象
2.  $(“input”)等价于js中的document.getElementsByTagName(“input”);
3.  $(“.div1”)通过class来取标签的dom对象  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]
4.  将jquery对象转成dom对象：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 2]
5.  将dom对象转成jquery对象：  
    ![6.][]

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>

[20190507083704432.png]: /images/20220205/ba701a9a5e324215a5f52ab106a48a65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]: /images/20220205/c6ad114d895c4b02af2e93336ca4ad13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]: /images/20220205/a1bffabf12724524916b83e7f8e75743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 2]: /images/20220205/6ca140cbf54449558c76ad9412668487.png
[6.]: /images/20220205/3b0b5d700eb54c1c9182fc3ee1279e7a.png