Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34121282

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a64786bf265da3e2f010c92

本文介绍了JQuery这一轻量级JavaScript库的基本概念及其优势。JQuery简化了HTML文档遍历、事件处理、动画等操作，并提供了强大的AJAX交互功能。此外，文章还探讨了JQuery与原生JavaScript对象之间的转换。

tags: Jquery

什么是Jquery？

Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

就是封装了JavaScript，能够简化我们写代码的一个JavaScript库

为什么要使用Jquery？

我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西...

（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小

    注意：项目中，提倡引用min版的js库
复制代码

（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome

    注意：**jQuery不是将所有JS全部封装，只是有选择的封装**
复制代码

（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

#回顾javascript#

JavaScript定位到HTML的控件有三种基本的方式：

（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()

我们发现，JavaScript的方法名太长了，不易于书写代码......

##封装优化##

这些方法名太长了，获取ID属性、NAME属性、标签名属性的控件也用不着三个方法，我们定义下规则就好了

传入的参数是"#"号开头的字符串，那么就是id属性
传入的参数是没有"#"号开头的字符串，也没有前缀修饰的字符串就是标签名属性

到这里，我们就可以根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。在内部还是调用document.getElementById()这些方法。我们真正在使用的时候直接写上我们自定义规则的字符串就可以获取对应的控件了。


	<script type="text/javascript">
		//$()表示定位指定的标签
		function $(str){
			//获取str变量的类型
			var type = typeof(str);
			//如果是string类型的话
			if(type == "string"){
				//截取字符串的第一个字符
				var first = str.substring(0,1);
				//如果是#号的话
				if("#" == first){
					//获取#号之后的所有字符串
					var end = str.substring(1,str.length);
					//根据id定位标签
					var element = document.getElementById(end);
					//如果找到了
					if(element != null){
						//返回标签
						return element;
					}else{
						alert("查无此标签");
					}
				}else{
				
				}
			}else{
				alert("参数必须是字符串类型");
			}
		}
	</script>

复制代码