1、jQuery选择元素,创建元素，执行回调：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="lib/jquery.js"></script>
<script>
// 创建ul标签在body中插入元素
$('<ul class="list"></ul>').appendTo('body');
// 选择dom元素对象的calss名称为.list的元素添加创建的li标签
$('.list').append($('<li class="li">你好，我是li</li>'));
// 执行一个回调
$(function () {
$('.li').css('color','blue');
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、常用的DOM操作有哪些：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul class="list">
<li class="item">列表项1</li>
<li class="item">列表项2</li>
<li class="red box">列表项3</li>
</ul>
<script src="lib/jquery.js"></script>
<script>
// 当.attr() 有二个参数时，就是设置新属性：id='first';
$('li:first-child').attr('id', 'first');
// 当.attr() 有1个参数时，就是查看属性：返回 id属性的值 ;
console.log($('li').eq(0).attr('id'));
//移除了li索引为0的class属性
$('li:eq(0)').removeAttr('class');
// 创建style标签，插入head标签里，给元素为class='.red'添加样式
$('<style></style>').appendTo('head').text('.red {color: red}');
// 给最后一个li添加 clsss='box' 属性，
$('li:last-child').addClass('box');
// 给最后一个li属性为 clsss='box'的移除
$('li').last().removeClass('box');
//获取calss为.list的元素，把input标签插入该元素中。并且获取到input元素，给input元素设置文本框内容
$('.list').append('<input type="text">').find('input').val('请输入用户名');
//获取class='.box'的元素，用链式调用添写css
$('.box').width(200).height(200).css('background-color','skyblue');
//获取class='.box'的元素，仅使用css方法,将所有样式全部以对象字面量方式进行设置
$('.box').css({
width: '200px',
height: '200px',
// backgroundColor: 'coral' //必须使用js驼峰语法
'background-color': 'coral' //'-'在js中是非常标识符,如果要用css语法,样式名要加引号
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、jQuery常用的选择器操作：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScrip</h3>
<ul>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</li>
<li>CSS1</li>
<li>CSS2</li>
<li>CSS3</li>
</ul>
</li>
</ul>
<script src="lib/jquery.js"></script>
<script>
//选择了页面中所有元素添加为：class='highlight'
$('*').addClass('highlight');
// 选择第一个<li>下全部<h3>class='highlight' 添加css样式
$('li:first h3').css('color','blue');
// 选择第li标签中的 h3标签元素，为class='highlight'添加css样式
$('li:first > h3').css('color','red');
// 给li文本内容为css的后面的li全部选中，背影颜色变红
$("li:contains('CSS'):last + li").css('background','red');
// 给li文本内容为html的后面的li全部选中，添加class='box'
$("li:contains('HTML'):last ~ li").addClass('box');
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、jQuery：form表单操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.highlight {
background-color: yellow;
}
.red{
background-color: red;
}
</style>
</head>
<body>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby[]" value="dance">跳舞
<input type="checkbox" name="hobby[]" value="sing" checked>唱歌
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script src="lib/jquery.js"></script>
<p>
<span>我是has()</span>
</p>
<ul>
<li class="item-a">我是parent()</li>
</ul>
<script>
// 选中input标签的元素为type="text"类型的文本框添加。class='highlight'
$('input[type="text"]').addClass('highlight');
// 选中所有的input标签属性，添加class ,not()去掉取消按钮和重置的class 属性
$(':input').not(':submit').not(':disabled').addClass('highlight');
// 查看被禁用的input属性处于被选中的状态的值：value="sing"
console.log($(':checkbox:checked').val());
// 查看没有被禁用的input属性处于未选中的状态的值：value="dance"
console.log($(':checkbox').not(':checked').val());
// 获取下拉框的属性处于被：选中状态的元素
console.log($(':input :selected').val());
// 选中所有的input文本为空的属性，添加class='box'
$('input').empty().addClass('box');
// 选中p标签里的span标签，添加class='red';
$('p').has('span').addClass('red');
// 选中li标签class='item-a'的父类元素，添加css样式
$("li.item-a").parent().css(
{
'width':'300px',
'height':'300px',
'background-color':'red'
}
);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
jQuery与原生javascript相比，有哪些优势，哪些劣势：
用jQuery可以用最少的代码完成一些事情，解决浏览器的兼容，函数库比较丰富，插件多。也可以自封装插件。相对来说原生jQuery比原生的js安全方面比较强点，因为jQuery是封装的！
