收藏
批改状态：合格
老师批语：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>jQuery中的常用选择器</title>
<style>
.bc{
background-color: green;
}
#cc{
background-color: blue;
}
</style>
</head>
<body>
<!--
<ul>
<li>西游记</li>
<li >水浒传</li>
<li >红楼梦</li>
<li>三国演义
<ul>
<h3>
三国志
</h3>
<li>篇章1</li>
<li>篇章2</li>
<li>篇章3</li>
</ul>
</li>
</ul>
-->
<form enctype="text/plain">
账号：<input type="text" name="accont" /><br>
密码：<input type="password" name="password" /><br>
性别：<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<input type="radio" name="sex" checked="checked" value="baomi">保密<br>
爱好：<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
<input type="checkbox" name="hobby" value="hobby[]">足球
<input type="checkbox" name="hobby" value="hobby[]">上网
<input type="checkbox" name="hobby" value="hobby[]">看书<br>
学历：<select name="xueli">
<option value="benke">本科</option>
<option value="zz">中专</option>
<option value="xx" selected>小学</option>
</select><br>
<button type="button">提交</button>
</form>
<ul>
<li>
星期三
</li>
<li>
星期五
</li>
</ul>
<script src="../lib/jQuery.js"></script>
<script>
//$('*').addClass('bc');//选中所有包括html
//$('li').addClass('bc');//选中所有li
//$('ul').addClass('bc');//选中所有li
//$('.bc').css('color','red');//class属性选择
//$('li').eq(1).addClass('bc')//选中第二个元素
//$('li#cc').addClass('bc')//选中id为cc的元素
//层级选择器
//$('li h3').css('color','red');选择li下的所有h3
//$('li > h3').css('color','red');选择li的子集元素
//+ 选择相邻兄弟元素 ~选择所有元素
//$('li:first + li').addClass('bc');
//$('li:first ~ li').addClass('bc');
//$(':input').addClass('bc');//选中所有的本本框，下拉框，按钮
$(':input[type="text"]').addClass('bc');
$(':input').not('button').addClass('bc');
console.log($(':checkbox:checked').val());
console.log($(':input :selected').val());
console.log($(':radio:checked').val());
/*jQuery常用的dom操作*/
$('ul').append('<li>星期六</li>');//从尾部插入新元素
$('<li>星期天</li>').appendTo('ul');//从尾部插入新元素
$('ul').prepend('<li>星期二</li>');//从头部插入新元素
$('<li>星期一</li>').prependTo('ul');//从头部插入新元素
$('li:eq(2)').after('<li>星期四</li>');//在元素之后插入
$('<li>星期日</li>').insertAfter('li:eq(5)');//将新元素插入到
//$('li:eq(2)').replaceWith('<li>星期！！！</li>');//替换
//$('li:odd').replaceWith('<li>星期****</li>');//替换
//$('li:even').replaceWith('<li>星期@</li>');//替换
//$('li:contains("星期")').replaceWith('<li style="color:red">礼拜~</li>');//替换
//$('<li style="color:gold">礼拜~</li>').replaceAll('li:contains("礼拜")');//替换
//$('li:odd').remove();//移除元素
//$('ul').empty();//清空元素
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery与原生的javascript相比优点：
语法简洁操作更加方便， jQuery消除了JavaScript跨平台兼容问题。 相比其他JavaScript和JavaScript库，jQuery更容易使用。 jQuery有一个庞大的库/函数。 jQuery有良好的文档和帮助手册。 jQuery支持AJAX。
缺点：
由于不是原生JavaScript语言，理解起来可能会受到限制。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
