首页 > 代码库 > 几个简单的jquery知识点练习

几个简单的jquery知识点练习

2024-11-12 06:34:39   203人阅读

三、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=http://www.mamicode.com/"按钮啊" 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=http://www.mamicode.com/"显示效果" 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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"添加类样式" id="btnAdd" /> 
<input type="button" name="name" value=http://www.mamicode.com/"移除类样式" id="btnRemove" /> 
<input type="button" name="name" value=http://www.mamicode.com/"切换" 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=http://www.mamicode.com/"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=http://www.mamicode.com/"显示效果" 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=http://www.mamicode.com/"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知识点练习


联系
我们