jquery实现各种实例

1、正反选实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <button onclick="selectall();">全选</button>
    <button onclick="canselall();">取消</button>
    <button onclick="reverseall();">反选</button>
    <tr>
        <td><input type="checkbox" value="444"></td>
        <td>11111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>11111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>11111</td>
    </tr>

</table>
<script src="jquery-3.1.1.js"></script>
<script>
    function selectall() {
//       var abc1= $(\'table []\');
//        console.log(abc1);
       $(\'table :checkbox\').prop(\'checked\',true);//找到table标签下面的style为checkbox的input标签，注意留空格
//        var abc1=$(\'table :checkbox\').prop(\'value\');
//        console.log(abc1);
    }
    function canselall() {
        $(\'table :checkbox\').prop(\'checked\',false)
    }
    
    function reverseall() {
        $(\'table :checkbox\').each(   //each表示juuery里面的循环，这里循环table标签下面的style为checkbox的input标签
                // 的this表示一个个循环的元素
                function () {
                    if($(this).prop(\'checked\')){
                        $(this).prop(\'checked\',false)
                    }else{
                        $(this).prop(\'checked\',true)
                    }
                }
        )
    }
</script>
</body>
</html>

　　jquery里面另外的一种循环方式，

    li=[11,22,33,55];
$.each(li,function (x,y) {
console.log(x,y)
});//这是循环的另外一种方式

　　效果如图

2、全选反选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{background-color: aquamarine;
            height: 3000px}

        .div3{
            width: 60px;
            height:60px;
            position: fixed;
            background-color: blue;
            right: 1px;
            bottom: 10px;
            font-size: 23px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">111</div>
<div class="div3 hide" onclick="returnTop();">返回顶部</div>


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

    window.onscroll=function () {      //window.onscroll表示监听滚轮
        var  index = $(window).scrollTop();//每当移动滚轮则捕获离顶部的高度
//        console.log(index);
        if(index>50){//当距离大于50时候才显示这个返回顶部的小框框
            $(\'.div3\').removeClass(\'hide\')
        }else {$(\'.div3\').addClass(\'hide\')}
    };
    function returnTop() {
        $(window).scrollTop(0)
    }
</script>
</body>
</html>

　　3、绑定事件基础处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="c1" style="background-color: blue">
    <p>hello</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(\'#c1\').append(\'<b>aaaa</b>\');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部
$(\'<b>uuuu</b>\').insertAfter(\'#c1\');//这是外部插入
$(\'ul\').delegate(\'li\',\'click\',function () {
    alert(\'123\')
});//绑定事件给标签li，每添加一条li就就自动绑定事件
    $(\'button\').click(function(){
        
    })
</script>

</body>
</html

　　4、插入标签

$(\'#c1\').append(\'<b>aaaa</b>\');//往后插入元素,prepend表示往前面插入数据，不过都是内部插入，即插入div内部
$(\'<b>uuuu</b>\').insertAfter(\'#c1\');//这是外部插入

　　详细如图

5、扩展

<script>
$(function () {
    jQuery.fn.extend(
            {
                hello:function(){

                    return $(this).text();//内部实际是一个for循环，取到所有的text文本
                }
            }
    );
    var index =$(\'.title\').hello();
    console.log(this);
    alert(index)
});

jQuery.extend({//另外一种扩展
    s1:function (arg) {
        $(arg)
    }
});

$.s1(\'.title\');
$(\'.title\').hello()


</script>

6、最后概括起来，jquery的基本用法结构

一、查找
选择器
基本选择器
id、class、tag
层级：div a .c1
组合：div，a .c1
属性：$("div[jay=\'abc\']")
筛选器
父亲
孩子
兄弟
哥哥们
弟弟们
子子孙孙：

二、操作
整体标签：
属性：
内容
三、事件
xxxx.click
xxxx.blind(\'click\')
xxxx.delegate(\'li\',\'click\',func)

四、扩展

五、ajax