Jquery第一章环境的搭建和介绍第一节 傷城~ 2022-04-25 06:02 150阅读 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
还没有评论,来说两句吧...