您的位置：首页 > Web前端 > JQuery
[php学习十六]JQuery练习1－选择器

2016-07-31 14:53 423 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery随便练习1</title>
<script src="jquery-3.1.0.min.js"></script>
<style>
.pclass1{background-color: #FFA500}
</style>
<script>
/*注意点1:这两种写法效果一样。~*/
$(function () {

});
$(document).ready(function () {

});

$(document).ready(function () {
$("#btnSetAllColor").click(function () {
/*注意点2:$("*")选择所有标签,但利用JQurey设置标签的CSS属性,不太好,没有输入提示,而且格式还不顺~*/
$("*").css({"background-color":"yellow"});
});
/*注意点3:这个click写法也是没谁了,而且还提示不需要参数。~*/
$("#btnSetChangeColor").click(function () {
/*注意点4:这里竟然不用each()就能设置每个标签的点击事件~!*/
$("*").click(function () {
$(this).css({"background-color":"red"});
});
});
/*注意点5:选择所有p标签并且用pclass1样式的标签,如果不加p,就是所有pclass1样式的标签~!*/
$(".pclass1").click(function () {
alert($(this).text());
});

$("ul li:first").click(function () {
alert($(this).text());
});
/*注意点6:first-child意思是作为第一个子元素的XX标签,如果XX标签不是第一个子标签,那么就选不到。~
*        而first意思是只要集合中有XX标签,就能选到,不论是否为第一个。~*/
$("ul:first-child li:first-child").mousedown(function () {
alert("div" + $(this).text());
});
/*注意点7:属性选择器意思是设置了XXX属性后的元素,如果没有设置,则不会选到.属性选择用的少吧~!~*/
$("a[href != 'http://www.baidu.com']:first").css({"font-size": "20px"});
/*注意点8:这里找的是所有button类型的标签,包括Form里的,单Google不支持From里面的,火狐支持~!*/
$(":button").css({"font-size": "20px"});
/*注意点9:even偶数,从0开始的。*/
$("ul li:even").css({"background-color":"green"});
$("ul li:odd").css({"background-color":"blue"});
});
</script>
</head>
<body>
<h1 class="pclass1">这是一个H1标签</h1>
<p class="pclass1">这是一个P标签</p>
<span>这是一个Span标签</span>
<div>这是一个Div标签</div>
<a href="http://www.baidu.com">这是一个A标签</a><br>
<a href="http://www.baidu.com">这是第二个A标签</a><br>
<a href="http://www.sina.com">这是第三个A标签</a><br>
<ul>这是一个无序表
<li><strong>这是无序表第一项(可点)</strong></li>
<li>这是无序表第二项</li>
<li>这是无序表第三项</li>
</ul>
<div>
<ul>这是一个作为Div第一个元素的无序表
<li><strong>这是无序表第一项(可点)</strong></li>
<li>这是无序表第二项</li>
<li>这是无序表第三项</li>
</ul>
</div>

<form>这是一个From标签
<label for="check1">复选框</label><input id="check1" type="checkbox" title="check1" >
<label for="radio1">单选框</label><input id="radio1" type="radio" title="radio1">
<input type="button" name="按钮" value="按钮">
</form>
<table border="1px">
<caption>这是一个Table</caption>
<thead>
<tr>
<th colspan="2">这是一个表头Thead</th>
</tr>
</thead>
<tr>
<th colspan="2">这是个列头th</th>
</tr>
<tr>
<td>这是一个Td</td>
<td>这是一个Td</td>
</tr>
<tfoot>
<tr>
<th colspan="2">这是一个表底Tfoot</th>
</tr>
</tfoot>
</table>
<hr>
<p class="pclass1"><small>设置所有标签的背景色</small></p>
<button id="btnSetAllColor">设置全部标签背景色</button>
<hr>
<p><small>设置点击标签后改变背景色</small></p>
<button id="btnSetChangeColor">设置全部标签背景色</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： jquery PHP javascript
相关文章推荐
新的分享
章节导航