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

posted @ 2017-03-29 00:58  蜗牛仔  阅读(297)  评论(0)    收藏  举报