1.jQuery常用核心属性和方法实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用核心属性和方法</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
//1.$(selector/html/obj/function(){})
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>我是一个列表项1</li>'));
$('.list').append($('<li id="two">我是列表项2</li>'));
$('.list').append($('<li>',{
class:'ip6',
text:'我是苹果',
click:function(){
alert('ip6');
}
}));
//each(),遍历jquery对象集合，css()就是直接设置的style属性
$('li').each(function () {
// this.style.backgroundColor='lightgreen';
$(this).css('background-color','cyan');
})
//get(),[] ,将获取到的jquery对象集合中的DOM元素取出来，jquery转为dom
$('li').get(0).style.backgroundColor='lightgreen';
$('li')[1].setAttribute('style','color:red');
console.log($('li').length);
//index() 返回当前元素在元素集合中的位置
console.log($('li#two').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.jQuery中常用内容选择器实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中常用内容选择器</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.eyecare{
background: lightgreen;
}
#title{
color:red;
}
</style>
</head>
<body>
<script>/*
jQuery中用的选择器:
(1).通用选择器:*,标签,类选择器.,id选择器#
(2).层级选择器: 空格, >直接子元素,+相邻兄弟,~所有兄弟
(3).属性选择器: [name]属性性,[name=value]名值 ,支持简单正规
(4).表单过滤器: vfyq使用过滤方法替代
[1].位置: :first,:last,even偶数,odd奇数,eq(n),:gt(n),:lt(n)从0索引
[2].css3中的过滤器: :last-child,:first-child,nth-child()...从1索引
[3].表单过滤器:
第一组:选择表单元素
1.:input: 选择<input><select><textarea><button>
2.:checkbox:选择复选框 input[type="checkbox"]
3.:radio: 选择单选按钮 input[type="radio"]
4.:submit: 选择提交按钮 input[type="submit"] 或 button[type="submit"]
5.:reset: 选择重置按钮 input[type="reset"] 或 button[type="reset"]
6.:text: 只选择type="text"的表单元素
7.:password:只选择type="password"的密码框
8.file:只选择 input[type="file"]
9.image: 只选择 input[type="image"]
第二组: 选择控件状态
1. :checked: 处于被选中状态,适用<checkbox>,<radio>
2. :disabled:只选禁用元素
3. :enabled: 只选启用元素
4. :focus: 只选择处于焦点的元素
5. :selectd: 选择处于选中状态的元素,适用于<select>
(5.)内容过滤器:
[1]. :contains['text']: 包含特定文本
[2]. :empty(): 内容为空的元素
[3]. :parent: 至少包含一个子节点的元素
[4]. :has(selector):包含匹配选择器的元素
[5]. :not(selector):获取排除匹配结果的元素
*/
$(function () {
// $('*').addClass('eyecare'); //选择所有元素
// $('li').addClass('eyecare');//标签选择器 ，选中所有标签
// $('.eyecare').css('color','blue');//css选择器
// $('#title').addClass('eyecare');//id选择器
//层级选择器
// $('li:first h3').addClass('eyecare'); //选择第一个li下所有h3
// $('li:first > h3').addClass('eyecare');//选择直接子元素
//+ 选择相邻兄弟元素 ~选择相邻所有兄弟元素
// $("li:contains('html'):last").addClass('eyecare');
// $("li:contains('html'):last ~ li").addClass('eyecare');
// $("li:contains('html'):last + li").addClass('eyecare');
$('ul').empty('');
// $('input[type="text"]').addClass('eyecare');
// $('input').addClass('eyecare');
$(':input').not(':submit').not(':disabled').addClass('eyecare');
// $(':reset').removeClass('eyecare');
/*console.log($(':checkbox:checked').val());
console.log($(':checkbox').not(':checked').val());
console.log($(':checkbox:checked').val()); //复选框不加空格
console.log($(':input :selected').val());//下拉框加空格
console.log($(':radio').val());//选中的单选框
console.log($(':radio').not(':checked').val()); //没选中的单选框*/
});
</script>
<ul>
<li>
<h3 id="title">第一个H3</h3>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>
<h3>jQuery</h3>
<ul>
<li>Bootstrop</li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
用户：<input type="text"><br>
密码: <input type="text" name=""><br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="femle">女
<br>
<input type="checkbox" name="hobby[]" value="dance" checked>跳舞
<input type="checkbox" name="hobby[]" value="yoga" checked>瑜伽
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
学历:<select>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="本科">本科</option>
<option value="其它">其它</option>
</select><br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.jQuery 中常用的DOM操作实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 中常用的DOM操作</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
/*jQuery中常用的DOM操作
(1). 插入与替换
[1].append()和appendTo(): 将当前元素添加到父元素内部的尾部
1.$(父元素).append(当前元素);
2.$(当前元素).appendTO(父元素);
[2].prepend()和prependTo(): 将节点添加到父元素内部的头部
1.$(父元素).prepend(当前元素)
2.$(当前元素).prependTo(父元素);
[3].after()和insertAfter():将元素插入到当前节点的后面
1.$(前).afer(后);
2.$(后).insertAfter(前);
[4].before()和insertBefore():将元素插入到当前节点的前面
1.$(后).before(前);
2.$(前).insertBefore(后);
[5].replaceWitdh()和replaceAll():替换掉匹配的html内容
1.$(原).replaceWith(新);
1.$(新).replaceAll(原);
(2).empty():删除匹配到的元素集合中的所有子节点
(3).remove(可用selector):删除匹配的元素
__________________________________________________________
*/
$(function(){
$('ul').append('<li>新列表1</li>');//添加到尾部
$('<li>新列表2</li>').appendTo('ul');//添加到尾部
$('ul').prepend('<li>新列表4</li>');//添加到头部
$('<li>新列表5</li>').prependTo('ul');//添加到头部
//在元素前后添加
$('li:eq(2)').after('<li>新元素6</li>');
$('<li>新元素7</li>').insertAfter('li:eq(4)');
//替换元素
$('<li>新元素116</li>').replaceAll('li:eq(2)');
// $('li:eq(4)').replaceWith('<li>新元素8</li>');
$('li:contains("新元素")').replaceWith('<li><span style="color:red">新元素</span></li>');
$('<li>新元素</li>').replaceAll('li:contains("新元素")');
// 删除元素
// $('li').remove();
// $('li').remove(':even'); 偶数
// $('li').remove(':odd'); 奇数
// console.log($('li').text());
// console.log($('li').eq(0).css('color','red'));
console.log($('li:gt(2)').css('color','red')); //向后
console.log($('li:lt(2)').css('color','blue')); //向前
});
</script>
<ul>
<li>列表01</li>
<li>列表02</li>
<li>列表03</li>
<li>列表04</li>
<li>列表05</li>
<li>列表06</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.jQuery与原生javascript相比，有哪些优势，哪些劣势。
jQuery相对javascript来说，写的代码更少，做的事情更多，而且与JavaScript相比，jQuery的语法更加简单。通过jQuery，可以很容易地浏览文档、选择元素、处理事件以及添加效果等。
缺点:每个需要的项目中都必须需要包含jQuery库文件。
