jQuery 基础学习 | 易学教程

jQuery

可以按照网站进行查看

http://jquery.cuishifeng.cn/

jQuery

模块《=》类库

DOM/BOM/JavaScript的类库

一查找元素

jQuery:

选择版本

1.0

2.0

3.0

可以选择1.0最新版本兼容性比较好 IE 线上环境选择压缩版本

1.1 引入jQuery

一般放在html末尾
<script src="jquery-2.1.4.min.js"></script>调用jQueryjQuery == $  一般写$

1.2 jQuery转换：

DOM对象与jQuery对象转换

jquery对象[0] => Dom对象

Dom对象 ==> $(Dom对象)

1.3 选择器

直接找到某个或者某类标签

1.id
  $('#id')

2.class
 <div class='c1'></div>
 $('.c1')

3 标签
<div id="10" class='c1'>
            <a>f</a>
            <a>f</a>
        </div>
        <div class='c1'>
            <a>f</a>
        </div>
        <div class='c1'>
            <div class='c2'> </div>
        </div>


  $('a')如果

筛选

二操作元素

===》实例:

基本选择器

筛选器

案例

用到的知识

基本选择器及筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-2.2.3.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

    <style>
        .menu{
            float: left;width: 10%;height: 500px;background-color: aqua

        }
        .content {
            float: left;width: 90%;height: 500px;background-color: darkolivegreen;

        }

        .title{
            background-color: black;
            color: white;
            height: 50px;
            line-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
<body>
        <div>

        <div class="menu">
            <div class="item">
                <div class="title" onclick="Func(this);">菜单一</div>
                <div class="body ">
                    <div>1.1</div>
                    <div>1.2</div>
                    <div>1.3</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="Func(this);">菜单二</div>
                    <div class="body hide">
                        <div>2.1</div>
                        <div>2.2</div>
                        <div>2.3</div>
                     </div>
            </div>

            <div class="item">
                <div class="title" onclick="Func(this);">菜单三</div>
                <div class="body hide">
                    <div>3.1</div>
                    <div>3.2</div>
                    <div>3.3</div>
                </div>
            </div>

            </div>

        <div class="content">

        </div>
        </div>

<script>
    function Func(ths) {

        $(ths).next().removeClass('hide');
        $(ths).parent().siblings().find('.body').addClass('hide');

    }

</script>

</body>
</html>

左侧菜单

属性

attr：

可以适用与所有的标签，初了checkbox，radios

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.2.3.js"></script>
    <style>
        .tab-box .box-menu{
            background-color: #dddddd;
            border: 1px solid #dddddd;
            line-height: 33px;
        }
        .box-menu a{


        }

        .tab-box .box-body{
            border: 1px solid #dddddd;

        }
        .hide {
            display: none;
        }
        .current{
            background-color: red;
            color: white;

        }
    </style>
</head>
<body>
        <div class="tab-box">
            <div class="box-menu">
                <!--所有菜单-->
                <a alex="c1" onclick="ChangeTab(this)" class="current">菜单一</a>
                <a alex="c2" onclick="ChangeTab(this)">菜单二</a>
                <a alex="c3" onclick="ChangeTab(this)">菜单三</a>

            </div>
            <div class="box-body">

                <!--所有内容-->
                <div id="c1">内容一</div>
                <div id="c2" class="hide">内容二</div>
                <div id="c3" class="hide">内容三</div>
            </div>

        </div>

<script>
    
    function  ChangeTab(ths){
        $(ths).addClass('current').siblings().removeClass('current')
        //获取当前点击的标签
        var contentId = $(ths).attr('alex')
        //$('#c1')
        var temp = "#" + contentId;
        $(temp).removeClass('hide').siblings().addClass('hide');

        //获取当前标签的属性
        //值$('#xx')显示，其它兄弟隐藏


    }
    
    
</script>


</body>
</html>

Tab菜单

checkbox属性

$('').prop('checked',true) 选上

$('').prop('checked',false) 取消

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input  id="c1" type="checkbox" />
    <input id="c3" type="checkbox" checked="checked">
    <div>
        <input type="button" value="全选" onclick="SelectAll()" />
        <input type="button" value="取消" onclick="ClearAll()" />

    </div>
    <div>

        <table border="1">
            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>

        </table>

    </div>

<script src="jquery-2.2.3.js"></script>

<script>
    function SelectAll() {
        //table标签中的所有input
        //$('table:checkbox') 找到了所有的input,checkbox
        $('table :checkbox').prop('checked',true);
    }

    function ClearAll() {
        $('table :checkbox').prop('checked',false);
    }

</script>

</body>
</html>

checkbox 全选取消

for循环

案例：

 function ReverseAll() {
        //i 下标索引
        //item 循环元素
        var userList = [11,22,33,44]
        $.each(userList,function (i,item) {
            console.log(i,item)
        });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input  id="c1" type="checkbox" />
    <input id="c3" type="checkbox" checked="checked">
    <div>
        <input type="button" value="全选" onclick="SelectAll()" />
        <input type="button" value="取消" onclick="ClearAll()" />
        <input type="button" value="反选" onclick="ReverseAll()" />

    </div>
    <div>

        <table border="1">
            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>123</td>

            </tr>
        </table>

    </div>

<script src="jquery-2.2.3.js"></script>

<script>
    function SelectAll() {
        //table标签中的所有input
        //$('table:checkbox') 找到了所有的input,checkbox
        $('table :checkbox').prop('checked',true);
    }

    function ClearAll() {
        $('table :checkbox').prop('checked',false);
    }

    function ReverseAll() {
        $('table :checkbox').each(function () {
            //每一个循环都执行该方法体
            //$(this)表示当前循环的元素
            var isChecked = $(this).prop('checked');
            if (isChecked){
                $(this).prop('checked',false);
            }else {
                $(this).prop('checked',true);
            }
        })
    }
</script>

</body>
</html>

checkbox反选

来源：https://www.cnblogs.com/yexiaochong/p/6595685.html

标签

jquery

jquery选择器

input

onclick

table