jQuery--适用于复习

最新推荐文章于 2024-05-20 15:17:08 发布

听~宇

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量87

点赞数

分类专栏：前端三件套文章标签： jquery javascript html

本文链接：https://blog.csdn.net/qq_47518713/article/details/124762210

版权

前端三件套专栏收录该内容

15 篇文章 1 订阅

订阅专栏

注意我举的每一个例子

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作

它操作DOM和JS不同

基本选择器

倒有点像css选择器

这个了解一下吧

第一个例子--标签选择器

第二个例子--id，class选择器

<script>
	  $(function(){
				$('#btn1').click(function(){
					$('div:first').css('background','red')
				})
				
				$('#btn2').click(function(){
					$('div:last').css('background','blue');
				})
				
				$("#btn3").click(function(){
                    //索引等于3
					$("div:eq(3)").css("background","orange");
				})
				
				$('#btn4').click(function(){
                    //索引小于3
					$('div:lt(3)').css('background','red')
				})
				
				$('#btn5').click(function(){
                    //索引大于3
					$('div:gt(3)').css('background','yellow')
				})
			})
		</script>

<body>
		<div id="one">我是div-0</div>
		<br />
		<div id="two">我是div-1</div>
		<br />
		<div>
			我是第三个div-2
			<div class="son">我是div-3</div>
			<div class="son">我是div-4</div>
		</div>
		<br />
		<div>我是div-5</div>
		<br>
		<span>我是span</span>
		<br>
		<p>功能按钮</p>
		<input type="button" id="btn1" value="选择第一个div"/><br>
		<input type="button" id="btn2" value="选择最后一个div"/><br>
		<input type="button" id="btn3" value="选择索引等于3的div"/><br>
		<input type="button" id="btn4" value="选择索引小于3的div"/><br>
		<input type="button" id="btn5" value="选择索引大于3的div"/><br>
	</body>

第三个

还有就是标签还可以组合使用

移入移出，hide，show

        <script>
			$(function(){
				//对div包括的图片进行移入移出操作
				$('li').mousemove(function(){
					$(this).children('div').show()
					$(this).css("background-color","blanchedalmond");
				}).mouseout(function(){
					$(this).children('div').hide()
					$(this).css("background-color","red");
				})
			})
		</script>

改成这样也行，大同小异

<script>
		$(function(){
			$("li").hover(function(){
				$(this).children("div").show();
				$(this).css("background-color","blanchedalmond");
			},function(){
				$(this).children("div").hide();
				$(this).css("background-color","red");
			})
		});
	</script>

<body>
		<div id="ddddddd" onclick="ddd(this)">移入移出</div>
		<div class="nav-box">
			<div class="nav-top"><a href="">全部商品分类</a></div>
			<ul>
				<li onmouseover="" onmouseout="">
					<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
				</li>
				<li>
					<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
				</li>
				<li>
					<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
				</li>
				<li>
					<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
				</li>
				<li>
					<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
				</li>
			</ul>
		</div>
	</body>

------------------------------------------------

表单验证

html5提供的 required pattern里面填正则表达式

<form action="http://javacto.ke.qq.com" method="post"><br />
			<h1>用户注册</h1>
			<!--required 必填-->
			用户名：<input id="userName" name="userName" required="required"  placeholder="用户名"/>
			<!--在这里面写正则表达式pattern  pattern="[0-9-()（）]{7,18}" -->
			电话：<input type="text"  required />
			邮箱：<input type="email" required />
			<!--<input required  pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"/>-->
			<br />
			年龄:<input type="number" max="10" min="5"   required="required"/>
			<br>
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
		</form>

举这个例子只是为了说一下css那儿

<script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        h2{padding: 5px;}
        p{display: none;}/*<p> 默认设置为了不显示*/
    </style>
  
  <script>
  	
  	jQuery(function(){
  		//给<h2>你喜欢的明星有哪些</h2> 加事件
  		$("h2").click(function(){
  			
  			$("h2").css("background-color","red").next().css("display","block").next().css("color","yellow");
  		});
  	});
  </script>

<body>
	<h2>你喜欢的明星有哪些</h2>
	<p>
		<strong>解答：</strong>
		明星1，明星2
	</p>
	 <div>bbbb</div>
</body>

几个事件

键盘事件

表单验证见JS零基础六

听~宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery--适用于复习

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作它操作DOM和JS不同基本选择器倒有点像css选择器第一个例子--标签选择器第二个例子--id，class选择器<script> $(function(){ $('#btn1').click(function(){ $('div:first').css('...
复制链接

扫一扫