8. jQuery框架

最新推荐文章于 2024-01-25 12:59:27 发布

cuichen97

最新推荐文章于 2024-01-25 12:59:27 发布

阅读量175

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/cuichen16/article/details/100087943

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.jQuery：是一个对JavaScript进行封装的轻量级框架

目的：简化JavaScript的操作

搭建环境：把jQuery文件通过script标签引入到项目中即可
本地引入：
cpn引入：了解

<script type="text/javascript" src="js/jquery-2.1.1.js">

JavaScript框架： jQuery框架 Vue.js

1. jQuery选择器：

  $("#id选择器")
  $(".class选择器")
  $("标签选择器")
   条件选择器   :
  $("标签:first/last/eq(索引)/gt(索引)/lt(索引)")
  $("标签:odd/even") 奇偶数选择器
  $(":text") type="text" 标签
    属性选择器
  var ary2=$("[href='#']");

通过jQuery方式获取的标签对象称为jQuery对象
通过原生方式（document.getXXXX）获取的对象称为JavaScript对象
两种方式可以互相转换：

【说明】：数组里的元素都是JavaScript对象 aryDiv[i]
var aryDiv=$(".cdiv"); 数组里的对象就是jQuery对象

两种对象可以相互转换

JavaScript对象转换成 jQuery对象 var jQueryObj=$(JavaScript对象);
jQuery对象转换成 JavaScript对象 var jsObj=jQueryObj.get(0);

【注意】两种不同对象的属性或方法不能混用
jQuery对象给表单标签获取货设置值
对象.val();

改变jQuery对象的样式:
在这里插入图片描述

2.动态DOM编程

1.创建一个标签
如何添加到指定的容器中
如何删除指定标签
如何替换掉已存在的标签

3.扩展：闭包问题

   内部函数使用了外部函数中的局部变量
   当调用内部函数时，外部函数的局部变量已经销毁，最后一个值是6

解决办法：

 (function(index){
          var t=aryGoods(index);
          事件
     })(i);

二.案例

1.选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.1.js" ></script>
		
		<script type="text/javascript" >
			$(function(){
				var div1 = $("div:first");
				var div2 = $("div:last");
				var div3 = $("div:eq(1)");
				alert(div1.text());
				alert(div2.text());
				alert(div3.text());
				
				//奇数选择器
				$("tr:odd").css("background","pink");
				//偶数选择器
				$("tr:even").css("background","black");
			});
		</script>
	</head>
	<body>
		<div>
			aaaa
		</div>
		<div>
			bbb
		</div>
		<div>
			ccc
		</div>
		<table border="" cellspacing="" cellpadding="">
			<tr><td>11</td></tr>
			<tr><td>11</td></tr>
			<tr><td>11</td></tr>
		</table>
	</body>
</html>

2.改变样式和删除标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.cdiv{
				height: 50px;
				width: 100px;
				background: red;
			}
			.cdiv1{
				/*height: 400px;
				width: 400px;*/
				background: blue;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
		<script type="text/javascript">
			//调用
			function createDiv1(){
				var div = $("<div id='div1'></div>");
				div.text("DIV中的内容");
				div.addClass("cdiv");
				
				//给创建的div添加事件
				div.click(function(){
					//用新的类选择器替换掉之前的
					//this.className="cdiv1";
					//在原有的样式基础上添加新的样式
					var temp=$(this);
					temp.addClass("cdiv1");
				})
				$("body").append(div);
			}
			//删除
			function deleteDiv1(){
				var div1=$("#div1");
				div1.remove();
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="createDiv1()" value="调用" />
		<input type="button" onclick="deleteDiv1()" value="删除" />
	</body>
</html>

获取表单标签中的所有值(一般用来获取用户注册或更新时输入的所有数据)

//jQuery封装的方法 serialize(),只能用在form表单里
var strData=$("#up").serialize();
1.
在这里插入图片描述
2.

在这里插入图片描述

cuichen97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8. jQuery框架

jQuery：是一个JavaScript进行封装的轻量级框架目的：简化JavaScript的操作搭建环境：把jQuery文件通过script标签引入到项目中即可本地引入：cpn引入：提前了解<script type="text/javascript" src="js/jquery-2.1.1.js">JavaScript框架： jQuery框架 Vue.js1....
复制链接

扫一扫

专栏目录