JQuery部分内容整理

JQuery部分内容整理

JQuery简介

  1. Jquery是一个js的框架(JSd1类库),对传统的js进行封装。
  2. 使用JQuery可以兼容各种游览器,方便的处理HTML、Events、动画效果等,方便的为网站提供AjAX交互。
  3. JQuery写法的简单性,易用性大大提升了人民对它的使用。
  4. 使用JQuery可以做到,html页面代码和控制的分离,彻底将控制代码放入一个单独的js文件。
  5. 使用JQuery需要引入JQuery的js文件,可以从https://jquery.com/下载

 

Jquery选择器

基本选择器

  • 使用JQuery进行定位时注意语法的特点,“$”符号接小括号
  • id 选择器:$(“#id”)
  • 类选择器:$(.class)
  • 元素选择器:$(“元素名”)
  • 通配符选择器:$(“*”)
  • 并列选择器:$(“选择器,选择器,选择器”)

层次选择器

后代选择器:使用空格,所有后代包含孙子以下的元素

子元素选择器:使用> 第一层的元素(儿子)

下一个元素: 使用+  下一个同辈元素

兄弟元素:使用~    后面所有的同辈元素

过滤选择器(过滤选择器以”:” 或”[]”开始)

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

表单选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery选择器</title>
	<script src="Jquery.js"></script>
	<script>
		//初始化加载
		window.onload=function(){
			//基本选择器
			var $div1 =	$("#div1");//ID选择器
			alert($div1.text());
			var $div = $(".div");//class选择器
			//alert($div.length);
			var $div1 = $("div");//标签选择器
		//	alert($div.text());
			//console.info($("*"));//所有选择器
			$("#div1,.span").css("background-color","red");//并列选择器
			
			//层次选择器
			//console.info($("#div3 span"));//后代选择器
			console.info($("#span2>span"));//直接子元素	
			console.info($("#span2+span"));//下一个兄弟元素
			console.info($("#spa1~span"));//后面所有的兄弟元素
			//过滤选择器
			//1--基本过滤选择器
			console.info($(":first"));
			//2---将selected排除在外
			console.info($("div:not('#div3')"));
			//3---eq(i)/gt(i)/lt(i) 下标大于小于等于i
			console.info($("div:eq(0)"));
			console.info($("div:gt(0)"));
			console.info($("div:lt(0)"));
			//四,内容过滤选择器
			//1---包含给定文本内容
			console.info($(":contains('内联span2')"));
			//2--匹配所有不包含子元素或文本的元素
			console.info($(":empty"));
			//3--匹配包含资源或文本的元素
			console.info($(":parent"));
			//<五、可见性过滤选择器
			console.info($(":hidden"));//不可见元素
			console.info(("visible"));//可见元素,
			//属性过滤选择器
				console.info($("div[class!=div]"));
			
			
			//六】表单选择器
			console.info($("input"));
			console.info($(":text"));
			console.info($(":submit"));
			
		}
	</script>
</head>
<body>
	<div id="div1" class="div">我是div1</div>
	<div id="div2" class="div">我是div2</div>
	<span class="span">我是span1111</span>
	<div id="div3">
		<div>
			<span id="span1" class="span">我是内联span1</span>
		</div>
		<span id="span2" class="span">我是内联span2</span>
		<span id="span3" class="span">我是内联span3</span>
	</div>
	<div style="display: none" id="div4">111</div>
	<form action="">
		<input type="text" value="aaa"/>
		<input type="password" value="123456"/>
		<input type="submit" value="提交">
	</form>
</body>
</html>

jQuery实现复选框全选全不选

<!doctype html>
<html lang=>
<head>
<meta charset="utf-8">
<title>复选框练习</title>
<script src="jQuery.js"	></script>
<script>
	window.onload=function(){
		//获得表格节点
		var tab = document.getElementById("tab1");
		//获得行
		var l = tab.rows.length;
		for(var i = 0;i < l;i++){
			if(i % 2 == 0)
			{
				tab.rows[i].style.backgroundColor = "yellow";			
			}
			else{
				tab.rows[i].style.backgroundColor = "pink";
			}		
		}
	}
	function checkAll(){
		//获得表头行的复选框
		var selectAll = $("#selectAll");
		//获得表格体中的所有复选框
		var ids = $("[name='ids']");
		//判断总复选框是否被选中
		if(selectAll.prop("checked")){
			//获得表格体集合,全选
			ids.prop("checked", true);
		}else{
			ids.prop("checked", false);
		}
	}
</script>
</head>
<body>
	<center>
		<h1>Js实现隔行换色</h1>
	</center>
	<table id="tab1" border="1" align="center" width="700px" height="200px">
		<thead>
			<tr>
				<th><input type="checkbox" id="selectAll" onclick="checkAll()"></th>
				<th>序号</th>
				<th>学科</th>
				<th>描述</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" name="ids"/></td>
				<td>1</td>
				<td>java</td>
				<td>万物皆对象</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
			  <td><input type="checkbox" name="ids" /></td>
                <td>2</td>
                <td>php</td>
                <td>php是最好的语言</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		<tr>
                <td><input type="checkbox" name="ids" /></td>
                <td>3</td>
                <td>Golang</td>
                <td>Golang发展前景巨大</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
            </tr>
		</tbody>
	</table>
</body>
</html>

练习:使用jQuery实现表格隔行换色

表格隔行换背景颜色:tbody tr:odd 奇数行 tbody tr:even 偶数行

Js实现初始化加载:window.onload = function(){}

JQuery实现 : $(function()}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jQuery.js"></script>
<script>
	$(function(){
		$("tr:odd").css("background-color", "pink");
		$("tr:even").css("background-color","yellow");
	});
</script>
	
</head>
	
<body>
	<center>
		<h1>js实现隔行换色</h1>
	</center>
	<table id="tab1" border="2px" align="center" height="200px" width="600px">
		<tr style="background-color: yellow">
		<th>序号</th>
		<th>学科</th>
		<th>描述</th>
		<th>操作</th>
		</tr>
		<tr>
			
			<td>1</td>
			<td>java</td>
			<td>万事接对象</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>

			<td>2</td>
			<td>php</td>
			<td>php是最好的语言</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>	
		<tr>

			<td>3</td>
			<td>Golang</td>
			<td>Golang发展前景巨大</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>	
	</table>
</body>
</html>

jQuery事件和效果

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery事件</title>
<script src="jQuery.js"></script>
<script>
	//都属于编程事件,之前学习的属于标签事件<br>
	$(function(){
		//click 单击事件
		$("#bt").click(function(){
			alert("按钮被点击");			  
		})
		//hover 鼠标移入 /移出
	  	$("#tx").hover(function(){
			alert("鼠标移入");
		},function(){
			alert("鼠标移出");
		})
		//console 元素发生改变事件
		$("#sel").change(function(){
			console.info($(this).val());//this代表当前对象,当前是dom对象,所以需要转换为Jquery对象
		})
		//鼠标其他事件 $("#xx").事件名(function(){})
		
	//	$("input, select:visible").hide();// hide 隐藏
	//	$("span:hidden").show();//hidden      显示
	//
		//toggle   单击切换.jQ1.9以后就移除
		/*$("#bt").toggle(function(){
			alert("点击第一次");
		},function(){
			alert("点击第二次");
		},function(){
			alert("点击第三次");
		} );*/
	
	});
	
	
	
</script>	
</head>
<body>
	<input type="button" id="bt" value="按钮" />
	<input type="text" id="tx" value="mary"/>
	<select id="sel">
		<option>选项一</option>
		<option>选项二</option>
		<option>选项三</option>
	</select>
	<span style="display: none">这里是span</span>
</body>
</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114789.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 校园导航系统_对学弟学妹高考的话

    校园导航系统_对学弟学妹高考的话欢迎学弟学妹对我们的软件提出宝贵意见。软件说明书项目名称:铁大校园导航(Alpha版)开发小组:五人行开发团队(曹坤,翟凯,梁世豪,司新红,万彤)简要说明:本导航旨在开发成为一款基于android的

  • SpringMVC框架理解

    SpringMVC框架理解1.Spring与Web环境集成1.1ApplicationContext应用上下文获取方式应用上下文对象是通过newClasspathXmlApplicationContext(spring配置文件)方式获取的,但是每次从容器中获得Bean时都要编写newClasspathXmlApplicationContext(spring配置文件),这样的弊端是配置文件加载多次,应用上下文对象创建多次。在Web项目中,可以使用ServletContextListener监听Web应用的启动,

  • linux查看文件和目录

    linux查看文件和目录linux查看文件和目录

  • 全网最详细黑苹果安装教程,小白一看就懂!

    全网最详细黑苹果安装教程,小白一看就懂!可以说:这是一套目前最全面的黑苹果安装教程,为了能让每个新手,更好的理解和掌握相关方法,教程按操作流程书写,新手请务必按顺序阅读,以便提高学习效率,高手可以随意观看,或者飘过。由于篇幅长度有限,一篇文章无法全部展现,更多具体内容请点击下方章节阅读。教程目录一、前言1,什么是黑苹果?二、硬件支持1,如何确认电脑是否支持安装黑苹果?三、准备工作1,黑苹果安装必备工具下载2,黑苹果启动U盘制作方法​3,配置EFI引导文件4,硬盘分区的设置方法​四、开始安装1,BIOS设置讲解!2,开

  • Window系统内核版本号及其查看方法「建议收藏」

    Window系统内核版本号及其查看方法「建议收藏」一.WindowsNTWindwosNT是一系列操作系统的总称。WindowsNT(NewTechnology)是Microsoft在1993年推出的面向工作站、网络服务器和大型计算机的网络操作系统,也可做PC操作系统。它与通信服务紧密集成,基于OS/2NT基础编制。OS/2由微软和IBM联合研制,分为微软的MicrosoftOS/2NT与IBM的IBMOS/2。

  • npm install 出错read ECONNRESET

    npm install 出错read ECONNRESET项目更新出错,需要重新从git上把项目拖出来,npm安装依赖时报错readECONNRESET,从网上查到了很多方式:npmconfigsetproxy=http://自己ip:端口,依旧readECONNRESET移除proxy,依旧readECONNRESET最后将registry中的https://registry.npmjs.org/替换成了http://registry.npmjs.org/npmconfigsetregistryhttp://registry

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号