收藏
批改状态：合格
老师批语：
$()函数的使用场景：选择元素、创建元素、执行回调等
$()选择元素支持css选择器和html代码；创建元素则使用方法append（），由父级调用，或者使用appendTo（），有创建的元素来调用，同时$()还支持回调函数，来进行相应的处理。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery对象核心</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
//1.$(selector/html/obj/function())
$('<ul class="list"></ul>').appendTo('body');
//插入li元素
$('.list').append($('<li>新苹果来了，买买买</li>'));//append()父级调用
//创建元素时添加 属性
$('ul').append($('<li id="two">我的***蠢蠢欲动</li>'));
//创建元素的属性较多时 可传入第二个字面量参数
$('.list').append($('<li>',{class:'iphone6s',text:'我的6s还能再战3年',click:function () {
alert('iphone6s')
}}));
//$(function(){})执行一个回调函数
$(function(){
$('.iphone6s').css('color','yellow');
});
//each(function): 对jquery对象的每个元素 都进行回调处理
$('li').each(function () {
$(this).css('background-color','skyblue');
});
//查看jquery对象集合中dom数量 length属性
console.log($('li').length);
//get()和[], 获取jquery中的dom，将jquery转为dom
$('li').get(0).style.backgroundColor = 'green';
$('li')[1].style.backgroundColor = 'coral';
console.log($('li').get().length);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jquery常用的选择器（层级和表单）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery常用的选择器</title>
<style>
.highlight{
background-color: yellow;
}
#title{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScript</h3>
<ul>
<li>jquery</li>
<li>bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱：<input type="email"><br>
密码：<input type="password"><br>
<!--input:radio-->
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<br>
你的学历：
<select name="" id="">
<option value="">小学</option>
<option value="">初中</option>
<option value="高中" selected>高中</option>
<option value="">大学</option>
</select><br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="../lib/jquery.js"></script>
<script>
//层级选择器
// $('li:first h3').addClass('highlight'); //选择每个li下的h3
$('li:first>h3').addClass('highlight');//仅选择子元素
//li:contains('html'):last 定位到最后一个内容是html的li
$("li:contains('HTML'):last").addClass('highlight');
$("li:contains('HTML'):last+li").addClass('highlight'); //相邻的li
$("li:contains('HTML'):last~li").addClass('highlight');//相邻所有兄弟
//选择文本框、
$('input[type="email"]').addClass('highlight');//属性选择器
$(':input').not(':submit').not(':disabled').addClass('highlight');
console.log($(':checkbox:checked').val());//当前选中的值
console.log($(':checkbox').not(':checked').val());//未被选中的值
console.log($(':checkbox').val());//默认选中的值
console.log($(':input :selected').val());// 过滤器之间空格 隔开
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.jQuery操作dom
操作dom，就是创建、更新、删除元素。以上的操作都是利用jQuery的函数来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的dom操作</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script src="../lib/jquery.js"></script>
<script>
$('ul').append('<li>新元素1</li>'); //添加到尾部
$('<li>新元素2</li>').appendTo('ul');
$('ul').prepend('<li>新元素3</li>');//头部添加
$('<li>新元素4</li>').prependTo('ul');
//元素前后添加
$('li:eq(3)').after('<li>新元素5</li>');
$('li:eq(6)').before('<li>新插入</li>');
$("<li>新元素6</li>").insertAfter('li:eq(3)');
//替换 replaceWith（）
$('li:contains("新元素")').replaceWith('<li style="color:red;">新元素</li>');
$('<li style="color:skyblue">新元素</li>').replaceAll('li:contains("新元素")');
//删除
// $('li').remove(); 全部删除
//$('li').remove(':odd') 删除奇数
$('ul').empty();//清空子节点
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.jQuery和原生JS相比的优劣势
优点：jQuery相对js来说，语法更加精简，更少的代码实现更多的功能，拥有大量的函数可以使用。js的代码则较为繁琐。另外jquery的兼容性比原生js要好。
缺点方面：jquery版本不能向后兼容，新版本不能兼容旧版本，引入多个jquery的插件可能会冲突。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
