$()函数的使用场景：选择元素、创建元素、执行回调等
$()选择元素支持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的层级选择器就是css的层级选择器，有相邻选择器、相邻兄弟选择器等。表单选择器则是带有：,例如：input就是选中所有 的input标签元素，还可以根据type属性或者加入not（）来选择。
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的插件可能会冲突。
