注意我举的每一个例子
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零基础六