首页 > 代码库 > 前端---jQuery

前端---jQuery

2024-08-16 20:30:06   219人阅读

jQuery是一个优秀的javascript框架，封装了javascript和DOM

 

一、查找

选择器

　　id选择器    #1

　　标签选择器   element

　　类选择器   .class

　　组合选择器   c1,c2,c3

　　层级选择器   #1 c1

筛选器

 

查找部分需要掌握的内容如下：

以下截图均来自  http://www.php100.com/manual/jquery/

技术分享技术分享技术分享

 

二、操作

操作CSS

操作html属性

文本操作

 

三、事件

优化

 

四、扩展

$.login

Form表单验证

 

五：Ajax

偷偷发请求

 

 

 

示例1 ：左侧菜单

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;      /*超过一个屏幕则加滚动条*/   
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;    /*字体居中*/
            background-color: cornflowerblue;
            color: white;   
        }
    </style>
<body>

    <div class="menu">
        <div class="item">
            <!--当点击当前标签时执行ShowMenu函数，this表示当前标签-->
            <div class="title " onclick="ShowMenu(this)">菜单一</div>    
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this)">菜单二</div>
            <div class="body">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenu(this)">菜单三</div>
            <div class="body">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths){
            // ths 是DOM中的标签对象
            // $(ths)  将DOM标签对象转换成jQuery标签对象
            //$(ths)[0]  将jQuery标签对象转换成DOM标签对象
            $(ths).next().removeClass(‘hide‘);        //javascript中的语句以分号结束
            $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);    

        }
    </script>

</body>
</html>
View Code

 

示例2：全选反选

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancleAll();"/>
    <input type="button" value="反选" onclick="ReverseAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"  /></td>
                <td>11</td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>22</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>33</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckAll(){
            //#tb是id选择器  input[type="checkbox"]是属性选择器   #tb input[type="checkbox"]是层级选择器
            $(‘#tb input[type="checkbox"]‘).prop("checked",true);
        }
        function CancleAll(){
            $(‘#tb input[type="checkbox"]‘).prop("checked",false);
        }
        function ReverseAll(){
            //each用于循环   function (){}是无名函数
            $(‘#tb input[type="checkbox"]‘).each(function (i){
               //this  当前标签DOM对象
               // $(this)  当前标签jQuery对象
                if($(this).prop("checked")){       //获取"checked"属性的值，prop专门用于这种是否选中
                    $(this).prop("checked",false);    //设置"checked"属性的值
                }
                else{
                    $(this).prop("checked",true);
                }

            });
        }
    </script>
</body>
</html>
View Code

 

前端---jQuery


联系
我们