Collection
Collection
jQuery与原生javascript相比他的优势在于比javascript的代码更加的简洁，读取效率高。
缺点在于由于不是原生的javascript 如果不熟悉的人可能会看不懂。可读性差等
以下是我的代码
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style>
ul{
padding: 0;
margin: 0;
}
ul li{
list-style-type: none;
margin-left: 30px;
}
.high{
background: #0099FF;
font-size: 2rem;
}
#size{
font-size: 5rem;
}
</style>
</head>
<body>
<ul>
<li>
<h2>我是01</h2>
<ul>
<li>
<h2>我是嵌套H2标签的01</h2>
</li>
<li>我是嵌套在的02</li>
<li>我是嵌套在的03</li>
<li>我是嵌套在的04</li>
<li>我是嵌套在的05</li>
</ul>
</li>
</ul>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
你的学历:
<select name="" id="">
<option value="" selected>幼儿园</option>
<option value="" >小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="../lib/jQuery.js"></script>
<script>
$('<div class="box"></div>').appendTo('body');//创建一个div并把它插入到body中
$('.box').append($('<span>我是一个测试</span><br>'));
$('.box').append($('<span>',{
class: 'A1',
text: '我是一个字面量的点击有惊喜',
click:function () {
alert('哈吓到了吧');
}
}));
// $('.box').each(function () {//遍历对象集合.使用jQuery中的属性
// $(this).css('background-color','pink');
// });
// $('span').get(0).style.backgroundColor = 'blue';//使用标签选择器
// $('span')[1].setAttribute('style','color:yellow');//使用标签选择器
//通用选择器
// $('*').addClass('high'); //选择了页面中所有元素
// $('li').addClass('high'); // 选择所有的 <li>标签
// $('.high').css('color','red'); // 选择有class="highlight"的元素
// $('#size').addClass('highlight'); // id选择器
//层级选择器
// $('li:first h2').addClass('high'); // 选择第一个<li>下全部<h3>
// $('li:first > h2').addClass('high'); // 仅选择子级元素,更深的级别忽略
// $("li:contains(2):last").addClass('high'); //验证定位效果
// $("li:contains(2):last + li").addClass('high'); //相依兄弟
// $("li:contains(2):last ~ li").addClass('high'); // 相邻所有兄弟
// // 选择文本框
// $('input[type="text"]').addClass('high'); // 属性选择器
// $(':input').not(':submit').not(':disabled').addClass('high');
//
// console.log($(':checkbox:checked').val()); // 当前选中的值
// console.log($(':checkbox').not(':checked').val()); //使用not排除掉被选中的.只保留未被选中
// console.log($(':checkbox').val()); //默认返回被选中的值
//
// console.log($(':input :selected').val()); // 注意过滤器之间必须要加空格,类:input并不针对select
//元素内部添加
$('ul').append('<li>新增01</li>'); // 添加到尾部
$('<li>新增02</li>').appendTo('ul'); // 添加到尾部
$('ul').prepend('<li>新增03</li>'); // 添加到头部
$('<li>新增04</li>').prependTo('ul'); // 添加到头部
//元素前后添加
$('li:eq(2)').after('<li>新增05</li>'); // 在头部序号为3的后面添加
$('<li>新增06</li>').insertAfter('li:eq(4)');//在尾部序号为5后面添加
//替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
$('li:contains("新增")').replaceWith('<li style="color:red">我是替换</li>');
$('<li style="color:lightgreen">新增</li>').replaceAll('li:contains("我是替换")');
//删除
// $('li').remove(); // 不传参数是全部删除
// $('li').remove(':odd'); // 删除奇数(从0开始)
// $('ul').empty(); // 等价于 $('li').remove();
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例