移动应用开发（3）--jQuery与JavaScript对比

最新推荐文章于 2023-04-25 13:19:27 发布

xyxNJFU

最新推荐文章于 2023-04-25 13:19:27 发布

阅读量332

点赞数

分类专栏：移动应用开发

本文链接：https://blog.csdn.net/x_____yx/article/details/81106561

版权

移动应用开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

1.在页面载入时，JavaScript只会显示第一个onload的内容，必须等网页中所有内容加载完成。

jQuery网页中所有的DOM结构绘制完毕后就执行，并且可以依次运行多个ready函数。DOM（document object model--文本对象模型)

JavaScript代码

<script type="text/javascript">
	function start(){
		alert("今天天气不错");
	}
	window.onload=function(){
		alert("不错~");
	}
</script>

只显示一个弹窗，但是显示哪一个不确定。

jQuery代码

<script type="text/javascript">
	$(document).ready(function(){
		alert("今天天气不错");
	});
	$(document).ready(function(){
		alert("不错");
	});
</script>

两个弹窗依次显示

2.jQuery选择器

基本选择器，层次选择器，过滤选择器，表单选择器

<script type="text/javascript">	
     $(document).ready(function() {
		//基本选择器
        $("font:eq(2)").css("color","#9CC");
		$("p").css("color","#CFC");
		//支持奇怪颜色单词
		$("#s3").css("color","red");
		$("*").css("color","blue");
		$("p,#s4").css("color","pink");
		//顺序影响颜色效果
		//alert($("p:eq(1)").text());
		/*$("button").click(function(){
			alert($("p:eq(1)").text());
			alert($("p:eq(1)").val());
		});*/
		
		//部分区域隐藏
		var $num=true;
		$("button").click(function(){
			if($num){
				$("p").hide();
				$num=false;
			}else{
				$("p").show();
				$num=true;
			}
		});
		//图片缩放
		$("button:eq(1)").click(function(){
			$("img").attr("width","800");
		});
		
		$("button:eq(2)").click(function(){
			$("img").attr("width","1000");
		});
		//css中若要恢复，须知道之前尺寸；而jquery可直接恢复
		$("button:eq(3)").click(function(){
			$("img").removeAttr("width");
		});
	});
</script>

<body>
    <font>热</font>
    <font>热</font>
    <font>热</font>
    <font>热</font>
    <hr>
    <p>心静自然凉</p>
    <p>心静自然凉</p>
    <p>心静自然凉</p>
    <p>心静自然凉</p>
    <span id="s1">20180717</span>
    <span id="s2">20180717</span>
    <span id="s3">20180717</span>
    <span id="s4">20180717</span>
    <button>点我呀</button>
    <hr>
    <img src="../20180716/image/tanwan.jpg" />
    <br>
    <button>变大</button>
    <button>变最大</button>
    <button>恢复</button>
</body>

小练习：

1.创建5对li的无序列表；

写在<body>标签中

<ur>
<li>1.java</li>
<li>2.HTML</li>
<li>3.CSS</li>
<li>4.javascript</li>
<li>5.jQuery</li>
</ur>

2.创建5个按钮；

<button id="b1">隐藏/显示</button>
<button id="b2">删除</button>
<button id="b3">第二个li变色</button>
<button id="b4">所有变色</button>
<button id="b5">弹框</button>

3.第一个按钮，用来隐藏/显示所有内容；

4.第二个按钮，用来删除最后一个li；

此处应用动态删除，每次删除最后（last）一个li。

5.第三个按钮，用来给第二对li的文字变成红色；

6.第四个按钮，让所有文字变色

7.第五个按钮，弹出框，显示每一个li中的内容

用到jQuery中的遍历。

先导入jQuery文件，然后依次实现每个button功能。

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function(){
		var $num = true;
		$("#b1").click(function(){
			if($num){
				$("*li").hide();
				$num=false;
			}else{
				$("*li").show();
				$num=true;
			}
		});
		$("#b2").click(function(){
			$("li:last").remove(); 
		});
		$("#b3").click(function(){
			$("li:eq(1)").css("color","red");
		});
		$("#b4").click(function(){
			$("li").css("color","#6FF");
		});
		//动态显示
		//each遍历
		$("#b5").click(function(){
  			$("li").each(function(){
    		alert($(this).text())
 			});
		});
	});
</script>

xyxNJFU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动应用开发（3）--jQuery与JavaScript对比

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。...
复制链接

扫一扫

专栏目录