jQuery

于 2020-09-21 22:33:00 发布
阅读量108 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Judith__/article/details/108682197
版权

一、jQuery事件
入口函数的三种编写方法：
（1）使用JavaScript方法做：
windown.οnlοad=function(){
var gz=document.getElementById(“gz”);//执行代码
alert(gz.innerHTML);
}
（2）使用jQuery框架来做
2.1）$(document).ready(function(){
alert(1);//执行代码
});
2.2) $(funtion(){
alert(1);//执行代码，一般采用这种，比较简单点
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器演示</title>
</head>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
		/* window.οnlοad=function(){
			var gz=document.getElemntById("gz");
			alert(gz.innerHTML);
		} */
		//jQuery框架来做
		//当页面加载完后执行
		//方式一：
	 	/* $(document).ready(function(){
			alert(1);
		});  */
		//方式二：
		/* $(function(){
			alert(1);
		}); */
		//当页面加载完后执行
		$(function(){
			//1.基本选择器
			console.log($("li"));
			console.log($("li").length);
			console.log($("#gz"));
			console.log($(".sz"));
			
			//2.层次选择器
			console.log($("gz+li"));
			//或者
			console.log($("gz").next());
			//选择广州的所有弟弟们
			console.log($("#gz~"));
			
			//3.表单选择器
			console.log($("input[checked='checked']").val());
			console.log($("#input").val());
		});
		
		
</script>
<body>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li id="gz">广州</li>
			<li class="sz">深圳</li>
			<li>西安</li>
			<li>香港</li>
			<ol>
				<li>天津</li>
			</ol>
		</ul>
		<input id="input" type="text" value="测试" />
		<input type="radio" name="sex" value="1" checked="checked" />男
		<input type="radio" name="sex" value="2" />女
</body>
</html>

在这里插入图片描述
二、Query选择器
jQuery选择器允许对多个或者单个HTML元素进行操作
（1）元素选择器
$(“p”)选取页面中的所有p元素
（2）id选择器
$("#ss")
（3）.class选择器
$(".ss")
（4）选取当前HTML元素
$(this)
（5）独立文件中使用jQuery函数
如果网站中包含许多页面，希望jQuery函数易于维护，把jQuery函数放到独立的.js文件中。
（6）jQuery属性操作方法
attr()方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。
下列实例中对节点的颜色的大小测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象演示</title>
</head>
<style>
p{
	background:red;
	opacity:0.3;
}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	function bigger(){
		//更改p节点颜色
		/* var ps=document.getElementsByTagName("p");
		var i=0;
		while(ps.length>0){
			ps[i++].style.color="blue";
		} */
		
		//给p节点添加颜色
		$("p").css("color","blue");
		//给节点设置字体大小
		var size=$("p").css("font-size");
		size=size.replace("px","");
		$("p").css("font-size",++size+"px");
		//获取p的字体大小
		var sizes=$("p").css("font-size");
		console.log(sizes);
	}
	
	function smaller(){
		//将"16px"变为可以计算的数字，去掉单位
		var size=$("p").css("font-size");
		var newsize=size.replace("px","");
		$("p").css("font-size",--newsize+"px");
		console.log(newsize);
	}
</script>
<body>
		<input type="button" value="+" onclick="bigger()" />
		<input type="button" value="-" onclick="smaller()" />
		<p>jQuery是JavaScript库</p>
		<p>jQuery极大地简化了JavaScript编程</p>
		<p>jQuery非常容易学</p>
</body>
</html>

三、jQuery事件
事件是指对不同访问者的响应。
事件处理程序指的是HTML中发生某些事件时所调用的方法。
例如：元素上移动鼠标、选取单选按钮或者点击元素。
jQuery事件方法语法
在jQuery事件方法中，定义一个点击事件，然后定义什么事件触发事件（实现方法是通过一个事件函数实现）。
（2）dblclick()
当双击元素是，会发生dblclick事件。
dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数。
（3）mouseenter()
当鼠标穿过元素时，会发生mouseenter事件。
（4）mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件
（5）hover()
hover()方法用于模拟光标悬停事件

//当鼠标移动到元素上时，会触发第一个指定的函数，当鼠标移出这个元素是，会触发指定的第二个函数。
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

（6）blur()


$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});


//单击事件
$("p").click(function(){
	$(this).hide();
});

四、jQuery操作内容，值，属性的演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作内容，值，属性的演示</title>
</head>
<style>
	.big{
		font-size:25px;
		font-weight:bolder;
	}
	
	.red{
		color:red;
		opacity:0.2;
	}
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	function f1(){
		$("p").css("color","pink");
		$("p").css("font-size","20px");
	}
	
	$(function(){
		//tiggleClass()切换类的属性值
		setInterval(function(){
			$("p").toggleClass("big").toggleClass("red");
		},1000)
	});
	
</script>
<body>
		<p>jQuery对样式操作提供了很友好的支持</p>
		<p>jQuery跨框架使得程序员少些了很多代码</p>
		<button onclick="f1()">点击我变色变大 </button>
</body>
</html>

五、jQuery对DOM的增删插

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对DOM的增，删，插</title>
</head>
<style>
	
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	function f1(){
		var li=document.createElement("li");
		li.innerHTML="西安";
		
		//jq写
		var li=$("<li>西安</li>");
		$("ul").append(li);
		$("ul").prepend(li);
	}
	function f2(){//两个插入不能同时进行
		var li=$("<li>昆明</li>");
		$("#gz").before(li);//在广州节点前面插入新节点
		$("#gz").after(li);//在广州节点后面插入新节点li
	}
	function f3(){
		$("li").remove("#gz");
		$("li:eq(0)").remove();
		$("li").remove("li:contains(州 )")
	}
	
</script>
<body>
		<div>
			<input type="button" value="追加" onclick="f1()" />
			<input type="button" value="插入" onclick="f1()" />
			<input type="button" value="删除" onclick="f1()" />
		</div>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li id="gz">广州</li>
			<li>深圳</li>
			<li>杭州</li>
			<li>西安</li>
			<li>长春</li>
			<li>长沙</li>
		</ul>
</body>
</html>

六、jQuery对样式的增加和删除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对样式的增加和删除</title>
</head>
<style>
	
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	function f1(){
		$("p").addClass("sty");
	}
	function f2(){
		//删除p节点的属性class=sty
		$("p").removeClass("sty");
		$("p").removeClass("sty2");
		}
	
</script>
<body>
		<button onclick="f1()">点击我（增加属性）</button>
		<button onclick="f2()">点击我（删除属性）</button>
		<p>jQuery方便我们的程序员，我们很喜欢它</p>
</body>
</html>

七、联动查询

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动查询</title>
</head>
<style>
	
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	var cities=[
	            	["西安市","汉中市","渭南市","咸阳市","延安市"],
	            	["昆明市","丽江市","西双版纳"],
	            	["成都市","都江堰","攀枝花市","绵阳市","广元市"],
	            	["杭州市","宁波市","温州市"]
	            ];
	function chg(){
		//获取对应index
		var value=$("#provice").val();
		var value=$("#provice").val();
		alert(value);
		//清空旧城市
		$("#city").html("<option>-请选择-</option>")
		//获取二级城市的名称
		var pcities=cities[value];
		alert(pcities);
		for(var i in pcities){
			//创建新节点<option>
			var op=$("<option>"+pcities[i]+"</option>")
			$("#city").append(op);
		}
	}
</script>
<body>
			省：<select onchange="chg()" id="provice">
					<option value="-1">-请选择-</option>
					<option value="0">陕西省</option>
					<option value="1">云南省</option>
					<option value="2">四川省</option>
					<option value="3">浙江省</option>
				</select>
				
			市：<select id="city">
						<option value="-1">-请选择-</option>
				</select>
</body>
</html>

八、通过节点关系查找节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过节点关系查找节点</title>
</head>
<style>
	
</style>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		//获取Guangzhou节点的父节点
		console.log($("#gz").parent());
		//获取ul节点的所有子节点
		console.log($("ul").children());
		
		var chs=$("ul").children();
		
		//获取ul下的所有子节点的内容
		for(var index in chs){
			console.log(chs.eq(index).html());
		}
		
		//设置给ul节点下的所有子节点添加背景色
		$("ul").children().css("color","pink");
		//设置广州节点的所有弟弟背景色
		$("#gz").next().css("background","#666666");
		//设置广州节点的上一个节点"哥哥"
		var r=$("#gz").prev();
		console.log(r);
		r.css("background","black");
		
		//设置广州节点的所有“哥哥”背景色
		$("#gz").prevAll().css("background","green");
		
		//在ul中找到没有class属性的所有节点
		$("ul").find("li:not(li[class])").css("background","442978")
		$("ul").find("li:not(li[id])").css('background',"red");
		
	});
</script>
<body>
			<ul>
					<li>Beijing</li>
					<li class="ss">Shanghai</li>
					<li id="gz">Guangzhou</li>
					<li>Shenzhen</li>
					<li>Hangzhou</li>
			</ul>
</body>
</html>
dingxiaozhuang
关注
Jquery动态更改一张位图的src与Attr的使用
12-09
今天用Jquery想动态更改一张位图的src发现css不好用，查看Jquery文档好像是css是设置样式的属性的，如颜色，字体，背景等，而attr貌似是能操作所有属性，包括Jquery未封装的属性。 代码如下: $(“#newClassImg”).attr(“src”, “./images/plus3.jpg”);//改变图片源 $(“#newClass”).css(“background-color”, “#d6d6d6”);//改变背景色 推荐一个Jquery中文文档查询网站 http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery 中attr()的一个用法
weixin_30498921的博客
06-07 95
html如下： <ul><li><img src="./img/addface_icon.png" alt=""></li></ul> <p></p>js 如下： $(function(){ var src = $("ul").find("img").attr("src");$('p').a...
attr 修改IMG src
weixin_33872566的博客
02-26 1282
jQuery修改img的src的方法：$("#img_id").attr("src","new_src"); 定义和用法 attr() 方法设置或返回被选元素的属性值。 根据该方法不同的参数，其工作方式也有所差异。 转载于:https://www.cnblogs.com/tongbiao/p/6445562.html...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
最新发布
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jquery用attr给src赋值--失效
谢彬のCSDN专栏
01-04 2万+
验证码 的问题 如果你这样写： $("#checkCodeImage").attr("src","${basePath}/CheckCodeServlet"); 在谷歌，火狐都没有问题，但是在ie下如果你不先点击图片来切换验证码，它永远失效；如果你点击一次，输个错的，它会刷一次，然后永远失效！ 那么你的换个写法： /* 解决在ie下验证码不换的bug */
关于jquery或js的attr方法，$("#img").attr({width:"这里想用百分比"});
飞翔的熊blabla
11-27 6641
1 2 3 4 $("#img").css({"width":"100%"});或 $("#img").css("width","100%");或 $("#img").width("100%");或 $("#img").attr("style","width:100%;");
js jquery给img的src属性赋值
信徒博客
03-25 1万+
html页面 <img src="" id="logo"/> js的普通赋值 document.getElementById("logo").src = "user.jpg"; Jquery赋值方法 $("#logo").attr('src',"user.jpg"); 取值 $("#imgId")[0].src; ...
【jQuery】修改图片src属性切换图片
求索
05-07 7万+
先看下，采用传统javascript是怎样修改图片的： function switchToGrid(){ document.getElementById('pic').src="img/f5/content_grid.jpg"; document.getElementById('sort_grid_pic
【Vue】vue中img的src属性绑定问题
热门推荐
Y.Cheng的博客
07-31 12万+
问题：img的src属性填写的图片地址，可以正常渲染，但是一旦利用绑定:src属性的时候，图片就加载失败了 需求：鼠标移入切换图片 上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，我替换图片的时候准备三元判断，src需要属性绑定，于是发现同样的地址，我放上去图片就是加载不出来，图片加载不出来，那肯定是地址问题了（插一句：上一位大佬文件结构可能不规范），一般都是static存放...
Jquery修改image的src属性，图片不加载问题
倔强的蜗牛
12-26 1万+
1.当点击某一按钮的时候，把图片域中的图片改变一下     "/servlet/CreateValidateNum" width="60" height="20" />     看不清             function reflush()         {             document.getElementById(randimg).src="/servlet/
给img标签动态设置src属性，不生效
感恩、奋进、自信
10-29 2万+
给img标签动态设置src属性，不生效js如下： for(var i = 0; i&lt;len;i++){ var data = datas[i]; var nickname = data.nickname; var avatar = data.avatar; var li_item = ''; if(avatar == null){ // ...
刷新iframe页面$('#iframe').attr('src', $('#iframe').attr('src'));
christalfuller的博客
07-12 1万+
1，reload 方法，该方法强迫浏览器刷新当前页面。　　语法：location.reload([bForceGet])　　参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) window.location.reload(); //方法1document.getElement
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值