几个简单的jquery知识点练习

浏览数：35 / 时间：2015年06月09日

三、jquery对象和dom对象

//页面的基本元素加载后

$(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>

</body>

四、jquery对象操作元素

//页面的基本元素加载后

$(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>

</body>

五、jquery获取兄弟元素的几个方法

1、next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）

2、nextAll(); //当前元素之后的所有兄弟元素

3、prev(); //当前元素之前的紧邻着的兄弟元素（上一个）

4、prevAll(); //当前元素之前的所有兄弟元素

5、siblings(); //当前元素的所有兄弟元素

案例：页面上有一个ul球队列表，当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个

li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝，自己不变色。

$(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>

</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>

案例：五角星评分

$(function () {

$(‘#tb td‘).mouseover(function () {

//当鼠标经过的时候把当前以及以前的元素变为实心的五角星

$(this).text(‘★‘).prevAll().text(‘★‘);

}).mouseout(function () {

//当鼠标离开时把实心的五角星换成空心的五角星

$(this).text(‘☆‘).siblings().text(‘☆‘);

});

</script>

</head>

<body>