jquery简介

时间  2019-11-11
标签 jquery 简介 栏目 JQuery 繁體版
原文   原文链接

注意：本教程参考自网上流传的李兴华老师的jquery开发框架视频，可是苦于没有相应的配套笔记，由我本人作了相应的整理.

本次学习的内容

主要来观察一下jquery与传统的javascript操做的区别javascript

具体内容

若是说如今要想实现页面的动态操做，那么天然能够想象到要使用”JAVASCRIPT+DOM”操做技术来实现，可是问题是什么，JavaScript+DOM的开发模式并不适合与全部的开发者，也就是说若是如今是一个非专业的技术人员，例如网页美工，对于如今的开发要求来说，一个优秀的美工人员除了要求会使用HTML+DIV+CSS等基本操做以外，必需要可以掌握复杂的dom操做，因而这些人就废了。而且就算是会使用咱们dom操做的开发人员，也会以为异常的麻烦。例如若是要建立一个元素document.createElement(),随后还要再使用appendChild()将此元素追加到咱们要操做的元素之中，然后才能显示，而且若是少设计了一些属性，那么元素的显示也不是咱们所但愿的那样。html

因此后来为了简化javascript+dom操做的难度，那么后来推出了一个叫prototype开发框架，随后在这个框架的基础上，有推出了一个新的框架---jquery.其支持度更加普遍，因此在任何的开发之中（99%）都存在jquery的开发身影，若是不会jquery很难找到一份满意的工做。java

首先jquery属于第三方的开发框架包(*.js文件)，登陆www.jquery.com下载jquery的最新版本。可是在下载的时候很是有意思的是：jquery提供了两类版本jquery

Jquery 1.x:全部浏览器都支持浏览器

Jquery 2.x:除了IE以外都支持app

为了考虑到兼容性的问题，仍是建议使用jquery1.x的开发框架，这样支持的浏览器会根据方便一些。之后在咱们学习的bootstarp开发框架也是用来jquery的技术。框架

若是要下载jquery实际上提供了两种类型的版本：dom

压缩版本(jquery-3.3.1.min.js)：删除掉全部的注释和空格信息(.min)函数

未压缩版本(jquery-3.3.1.js)：主要是给用户学习使用的，全部的注释以及空格都会保留，学习

jquery使用

  1. 在项目 的目录之中建立一个js的文件目录
  2. 随后将jquery的开发包拷贝到目录中
  3. 在须要使用JQuery的页面位置使用<script>元素进行导入
  4. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    范例：编写第一个jquery程序

  5. <html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($(msg).val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="msg" id="msg">
		<input type="button" value="显示信息" onclick="show()">
	</body>
</html>

    本程序中咱们所使用的$(msg).val()操做，替代了”document.getElementById(“msg”).value”。如今能够感觉到jquery就是在简化程序开发的dom操做。

    jquery中最经常使用的语法形式就是”$(元素id)”,而val是一个操做函数用于取得各个表单组件的输入内容。

    在以前曾经使用过innerHTML操做设置”<span>”或”<div>”元素的内容，那么这一操做如今也能够简化。

  6. 范例：设置元素中的显示内容

  7. <html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function setContent() {
				$(msg).text("www.mldn.cn");
			}
		</script>
	</head>
	<body>
		<span id="msg"></span>
		<input type="button" value="显示信息" onclick="setContent()">
	</body>
</html>

    使用text()函数能够设置指定id元素的显示文本内容，可是须要注意的是，text()函数只可以设置普通文本，而不能设置HTML文本数据。

        此时若是使用了text()函数设置了包含有html代码的内容，则全部的html代码中的标记都会自动使用转义字符进行替代。可是所须要的是html效果，那么可使用html()函数完成操做。

范例：设置html的显示风格

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function setContent() {
				$(msg).html("<h1>www.mldn.cn</h1>");
			}
		</script>
	</head>
	<body>
		<span id="msg"></span>
		<input type="button" value="显示信息" onclick="setContent()">
	</body>
</html>

text()只能设置文本数据，若是有html元素那么将没法按照html的效果显示，而html()函数能够设置html风格的显示样式。

在使用javascript操做html的时候曾经强调过可使用onload实现页面加载后的处理操做，然后若是咱们使用的是javascript采用：

window.onload = function(){}完成，可是这样的操做在咱们的jquery里面也有支持，它支持两种：

第一种使用标准的jquery操做：

完整操做

简化操做

        <script type="text/javascript">

           // dom操做对象在jquery中依然可使用

            $(document).ready(function(){

               alert("www.mldn.cn");

           });

        </script>

<script type="text/javascript">

// dom操做对象在jquery中依然可使用

$(function(){

    alert("www.mldn.cn");

});

</script>

第二种使用文本的替代标记，使用jquery替代$

完整操做

简化操做

        <script type="text/javascript">

           // dom操做对象在jquery中依然可使用

            jQuery(document).ready(function(){

               alert("www.mldn.cn");

           });

        </script>

        <script type="text/javascript">

           // dom操做对象在jquery中依然可使用

            jQuery(function(){

               alert("www.mldn.cn");

           });

        </script>

以上的几种使用形式实际上均可能常常见到，可是我我的的开发建议：使用”$”,这个最简短，最好用。

总结

  1. jquery主要目的是封装了复杂的dom操做，是开发者使用起来感受简单；
  2. “$(id)”是jquery中选择器的主要操做形式；
  3. text()与html()这两个函数虽然能够设置内容，可是严格来说，这两个函数实际上依然属于dom操做范畴的。

text()不支持html显示;

html()支持html显示。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程