几个简单的jquery知识点练习
2015-01-21 20:52
302 查看
三、jquery对象和dom对象
<script type="text/javascript">
//页面的基本元素加载后
$(function () {
var btnObjDom = document.getElementById('btn');
//dom对象变成jquery对象
alert($(btnObjDom).val());//如果val()该方法括号中什么都不写，表示的是获取值
//如果在括号中写内容了，表示的是设置该属性的值
//jquery对象变成dom对象
// $(btnObjDom).get(0);//第一种方式
//$(btnObjDom)[0];//第二种方式
//id选择器
alert($('#btn').val());
});
</script>
</head>
<body>
<input type="button" name="name" value="按钮啊" id="btn" />
</body>
四、jquery对象操作元素
<script type="text/javascript">
//页面的基本元素加载后
$(function () {
//id选择器
$('#btn').click(function () {
//$('#dv').css('backgroundColor', 'red');
//$('#dv').text('就将计就计');//兼容性问题没了
//$('#dv').html('<font face="黑体" color="yellow">哈哈哈</font>');
//链式编程----只要是设置值 返回的还是当前的元素对象
$('#dv').css('backgroundColor', 'red').text('哈哈哈哈哈').css('width','200px');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div style="width:300px; height:200px; border:1px solid gray;" id="dv"></div>
</body>
五、jquery获取兄弟元素的几个方法
1、next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
2、nextAll(); //当前元素之后的所有兄弟元素
3、prev(); //当前元素之前的紧邻着的兄弟元素（上一个）
4、prevAll(); //当前元素之前的所有兄弟元素
5、siblings(); //当前元素的所有兄弟元素
案例：页面上有一个ul球队列表，当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个
li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝，自己不变色。
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#uul li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '')
}).click(function(){
//断链了 用end()可以修复到之前的链接
$(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
});
});
</script>
</head>
<body>
<ul id="uul">
<li>马刺</li>
<li>雷霆</li>
<li>山猫</li>
<li>灰熊</li>
<li>湖人</li>
<li>火箭</li>
<li>公牛</li>
<li>76人</li>
<li>骑士</li>
</ul>
</body>
六、链式编程|addClass|removeClass
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.cls {
width:300px;
height:200px;
background-color:red;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//添加类样式
$('#btnAdd').click(function () {
//$('div').addClass('cls');
$('body').addClass('cls');
})
//移除类样式
$('#btnRemove').click(function () {
//$(\div').removeClass('cls');
$('body').removeClass('cls');
});
$('#btn').click(function () {
$('div').toggleClass('cls');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="添加类样式" id="btnAdd" />
<input type="button" name="name" value="移除类样式" id="btnRemove" />
<input type="button" name="name" value="切换" id="btn" />
<div></div>
</body>
</html>
七、基本过滤选择器
1、：first选取第一个元素。 $("div:first")选取第一个<div>。
2、：last选取最后一个元素。$("div:last")选取最后一个<div>。
3、：not(选择器)选取不满足“选择器”条件的元素。$("input:not(.myclass)")选取样式名不是myclass的<input>
4、：even，：odd,选取的索引是偶数、奇数的元素：$("input:even")选择索引是奇数的<input>
5、：eq(索引序号)、：gt(索引序号)、：lt(索引序号)选取索引等于、大于、小于索引序号的元素
6、$(":header")选取所有的h1,h2,h3,h4,h5,h6元素
7、$("div:animated")选取正在执行动画的<div>元素
案例：
第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。
用jQuery实现。
注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基础上再选择0,1,2。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#tb tr:eq(0)').css('fontSize', '30px');
$('#tb tr:lt(4)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');
$('#tb tr:last').css('color', 'red');
//$('#tb tr:lt(3)').css('font-weight', 'bolder');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<table border="1" id="tb">
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>tom</td>
<td>100</td>
</tr>
<tr>
<td>lucy</td>
<td>89</td>
</tr>
<tr>
<td>lili</td>
<td>67</td>
</tr>
<tr>
<td>jim</td>
<td>89</td>
</tr>
<tr>
<td>baby</td>
<td>67</td>
</tr>
<tr>
<td>
平均分
</td>
<td>
99
</td>
</tr>
</table>
</body>
</html>
案例：五角星评分
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#tb td').mouseover(function () {
//当鼠标经过的时候把当前以及以前的元素变为实心的五角星
$(this).text('★').prevAll().text('★');
}).mouseout(function () {
//当鼠标离开时把实心的五角星换成空心的五角星
$(this).text('☆').siblings().text('☆');
});
});
</script>
</head>
<body>
<table border="1" id="tb" style="cursor:pointer">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
<script type="text/javascript">
//页面的基本元素加载后
$(function () {
var btnObjDom = document.getElementById('btn');
//dom对象变成jquery对象
alert($(btnObjDom).val());//如果val()该方法括号中什么都不写，表示的是获取值
//如果在括号中写内容了，表示的是设置该属性的值
//jquery对象变成dom对象
// $(btnObjDom).get(0);//第一种方式
//$(btnObjDom)[0];//第二种方式
//id选择器
alert($('#btn').val());
});
</script>
</head>
<body>
<input type="button" name="name" value="按钮啊" id="btn" />
</body>
四、jquery对象操作元素
<script type="text/javascript">
//页面的基本元素加载后
$(function () {
//id选择器
$('#btn').click(function () {
//$('#dv').css('backgroundColor', 'red');
//$('#dv').text('就将计就计');//兼容性问题没了
//$('#dv').html('<font face="黑体" color="yellow">哈哈哈</font>');
//链式编程----只要是设置值 返回的还是当前的元素对象
$('#dv').css('backgroundColor', 'red').text('哈哈哈哈哈').css('width','200px');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<div style="width:300px; height:200px; border:1px solid gray;" id="dv"></div>
</body>
五、jquery获取兄弟元素的几个方法
1、next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
2、nextAll(); //当前元素之后的所有兄弟元素
3、prev(); //当前元素之前的紧邻着的兄弟元素（上一个）
4、prevAll(); //当前元素之前的所有兄弟元素
5、siblings(); //当前元素的所有兄弟元素
案例：页面上有一个ul球队列表，当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个
li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝，自己不变色。
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#uul li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '')
}).click(function(){
//断链了 用end()可以修复到之前的链接
$(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
});
});
</script>
</head>
<body>
<ul id="uul">
<li>马刺</li>
<li>雷霆</li>
<li>山猫</li>
<li>灰熊</li>
<li>湖人</li>
<li>火箭</li>
<li>公牛</li>
<li>76人</li>
<li>骑士</li>
</ul>
</body>
六、链式编程|addClass|removeClass
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.cls {
width:300px;
height:200px;
background-color:red;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
//添加类样式
$('#btnAdd').click(function () {
//$('div').addClass('cls');
$('body').addClass('cls');
})
//移除类样式
$('#btnRemove').click(function () {
//$(\div').removeClass('cls');
$('body').removeClass('cls');
});
$('#btn').click(function () {
$('div').toggleClass('cls');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="添加类样式" id="btnAdd" />
<input type="button" name="name" value="移除类样式" id="btnRemove" />
<input type="button" name="name" value="切换" id="btn" />
<div></div>
</body>
</html>
七、基本过滤选择器
1、：first选取第一个元素。 $("div:first")选取第一个<div>。
2、：last选取最后一个元素。$("div:last")选取最后一个<div>。
3、：not(选择器)选取不满足“选择器”条件的元素。$("input:not(.myclass)")选取样式名不是myclass的<input>
4、：even，：odd,选取的索引是偶数、奇数的元素：$("input:even")选择索引是奇数的<input>
5、：eq(索引序号)、：gt(索引序号)、：lt(索引序号)选取索引等于、大于、小于索引序号的元素
6、$(":header")选取所有的h1,h2,h3,h4,h5,h6元素
7、$("div:animated")选取正在执行动画的<div>元素
案例：
第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。
用jQuery实现。
注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基础上再选择0,1,2。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('#tb tr:eq(0)').css('fontSize', '30px');
$('#tb tr:lt(4)').css('fontSize', '28px');
$('#tb tr:odd').css('backgroundColor', 'red');
$('#tb tr:last').css('color', 'red');
//$('#tb tr:lt(3)').css('font-weight', 'bolder');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<table border="1" id="tb">
<tr>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>tom</td>
<td>100</td>
</tr>
<tr>
<td>lucy</td>
<td>89</td>
</tr>
<tr>
<td>lili</td>
<td>67</td>
</tr>
<tr>
<td>jim</td>
<td>89</td>
</tr>
<tr>
<td>baby</td>
<td>67</td>
</tr>
<tr>
<td>
平均分
</td>
<td>
99
</td>
</tr>
</table>
</body>
</html>
案例：五角星评分
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
$('#tb td').mouseover(function () {
//当鼠标经过的时候把当前以及以前的元素变为实心的五角星
$(this).text('★').prevAll().text('★');
}).mouseout(function () {
//当鼠标离开时把实心的五角星换成空心的五角星
$(this).text('☆').siblings().text('☆');
});
});
</script>
</head>
<body>
<table border="1" id="tb" style="cursor:pointer">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 几个脚本的简单练习（二）
- JQuery 中几个类选择器的简单使用介绍
- 简单的几个OC知识点
- jQuery简单练习（1）
- jQuery的一些简单知识点(二)
- 几个简单的jQuery扩展函数
- SqlServer中的几个疏漏的知识点--联合查询，索引键，几个练习
- jQuery的简单入门练习
- 几个简单的jQuery使用方法
- python基础练习之几个简单的游戏
- JQuery 中简单的几个 类选择器 使用方法
- 简单模仿jquery的几个特性
- jquery和js的几个简单例子
- JQuery基础练习：简单的手风琴效果
- 小结：前几个练习的小结和一些知识点
- 简单的jQuery练习-Ajax，CSS和PHP结合
- jQuery的几个Grid插件简单比较
- JavaScript 写几个简单的知识点
- jquery简单练习题目五个
- Java几个技术点，简单的说说学好Java必须弄懂哪些知识点