jQuery

jquery方法找到的对象叫做jquery对象,原生js方法找到的标签对象叫做DOM对象,有各自的方法

jquery对象和DOM对象互相转换

jquery对象---DOM对象: jquery对象[0].style.backgroundColor = 'red'

dom对象 --- jquery对象: $(DOM对象).css('background-color','red')

jQuery引入

将jqyery写入本地文件,在script标签内引入jquery文件路径

<script src = 'jquery文件路径'></script>

<script>

　　'jquery代码'

</script>

查找标签

基本选择器

id选择器     $('#id')
标签选择器   $('标签名')
class选择器  $('.类名')
组合选择器   $('#id,.d1')

层级选择器

后代选择器   $('x y')  x的所有后代y
子代选择器   $('x > y')  x的所有子代y
毗邻选择器   $('x + y')  找到紧挨在x后面的标签y
兄弟选择器   $('x ~ y')  x之后所有的同级y

基本筛选器

$('选择器:first')      获取匹配的第一个元素
$('选择器:last')       获取匹配的最后一个元素
$('选择器:eq(索引)')    索引等于index的那个元素
$('选择器:even')       匹配所有索引值为偶数的元素，从 0 开始计数
$('选择器:odd')        匹配所有索引值为奇数的元素，从 0 开始计数
$('选择器:gt(索引)')    匹配所有大于给定索引值的元素
$('选择器:lt(索引)')    匹配所有小于给定索引值的元素
$('选择器:not(选择器)')    移除所有满足not条件的标签
$('选择器:has(选择器)')    选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器

# 多用于input标签
[属性]        $('input[type]')
[属性=值]     $('input[type=text]')     查找type=text类型的input标签
[属性!=值]    $('input[type!=text]')    查找type不等于text类型的input标签

表单筛选器

# 多用于input标签,通过属性选择器也可以查找到
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

$(":checkbox")    找到所有的checkbox类型的input标签

表单对象属性选择器

在input标签内设置   
    <input type="text" disabled>  表示这个输入框不可用
    <input type="text" checked>   表示这个选择框默认被选中
    <input type="text" selected>  表示这个下拉选项默认被选中
    
    :enabled
    :disabled   
    :checked     
    :selected
    
    注意: 在使用checked属性查找时,会把input标签中有checked属性的标签和select下拉选项中被选中的标签都筛选出来, 一般在checked属性前加input,表示筛选input标签中有checked属性的标签
    <input type="checkbox" checked>抽烟
    <input type="checkbox" checked>喝酒
    <input type="checkbox">烫头
    <select name="" id="s1">
        <option value="">朝阳</option>
        <option value="" selected>海淀</option>
        <option value="">昌平</option>
        <option value="">东城</option>
    </select>
    
    $(':checked')         会查找出3条结果,包括option=海淀的标签
    $('input:checked')    结果是两条
    $(':selected')        查找被选中的option

筛选器方法

下一个元素

$("选择器").next()
$("选择器").nextAll()         
$("选择器").nextUntil("#i2")    直到找到id为i2的标签就结束查找，但是不包含它

上一个元素

$("选择器").prev()
$("选择器").prevAll()
$("选择器").prevUntil("#i2")    直到找到id为i2的标签就结束查找，但是不包含它

父亲元素

$("选择器").parent()
$("选择器").parents()    查找当前元素的所有的父辈元素（所有祖先辈,直到html）
$("选择器").parentsUntil('body')    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签

儿子和兄弟元素

$("选择器").children();         子辈们
$("选择器").siblings("#id");    同级兄弟们,不包含自己,还可以添加元素进行进一步筛选

查找

find  查找后代
$("div").find("p")      等价于$("div p")     查找div标签中的字标签p

筛选

$("div").filter(".c1")  等价于 $("div.c1")   从所有的div标签中过滤出有class='c1'属性的div
    
和前面写在选择器内:first的作用一致,也可以写在对象后面,使用.的形式
.first()    获取匹配的第一个元素
.last()     获取匹配的最后一个元素
.not()      从匹配元素的集合中删除与指定表达式匹配的元素
.has()      保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()       索引值等于指定值的元素

操作标签

样式操作

addClass()      添加指定的CSS类名
removeClass()   移除指定的CSS类名
hasClass()      判断样式存不存在
toggleClass()   切换CSS类名，如果有就移除，如果没有就添加
    
还可以直接操作CSS属性修改样式: 
$("p").css("color", "red")   将p标签的字体颜色设置成红色
$(".c1").css({"geight":200px,"width":200px})  如果要修改多个属性,需要用对象的形式设置键值对

位置操作

.offset()          相对于页面左上角的距离,也可以通过设置移动位置          
    .offset({top:200,left:200})
.position()        相对于父级标签(设置了position:relative或absolute)的距离,如果没有,则根据浏览器左上角,不能设置位置
$(window).scrollTop()    滚轮向下移动的距离
$(window).scrollLeft()   滚轮向左移动的距离

尺寸

.height()       内容content的高度
.width()        内容content的宽度
.innerHeight()  内容content高度 + 两个padding的高度
.innerWidth()   内容content高度 + 两个padding的宽度
.outerHeight()  内容高度 + 两个padding的高度 + 两个border的高度
.outerWidth()   内容高度 + 两个padding的高度 + 两个border的宽度

文本

.text()         获取匹配元素的文本内容,不包括标签
.text('内容')   可以设置新的内容,替换之前的文本内容
.html()         获取第一个匹配元素的html内容,包括标签
.html('内容')   设置新的内容替换之前的内容,可以识别标签

值操作

// 查看选中的值
radio       $(':radio:checked').val()
checkbox    $(':checkbox:checked').val()
select单选下拉框   $('select').val()
select多选下拉框   $('select').val()

// 设置值
radio                $(':radio').val([值])
checkbox             $(':checkbox').val([值1,值2])
select单选下拉框     $('select').val(值)
select多选下拉框     $('select').val([值1,值2])

    注意: 在使用checked或者selected查找值时,如果找到两个对象,但是取值的时候只返回第一个的值,所以需要循环取值

for(var i in $('input:checked')) {
    console.log($('input:checked').eq(i).val())}

属性操作

attr(属性名)        通过属性名查找值
attr(属性名,值)     设置属性
attr({属性名:值,属性名:值})   设置多个属性值
removeAttr()        删除属性
    
prop()              判断标签的状态   checked selected disabled   返回布尔值
标签对象.prop('checked',true)   将标签对象设置为选中状态

文档处理

$(A).append(B)   把B追加到A的内部的后面
$(A).appendTo(B) 把A追加到B的内部的后面
    
$(A).prepend(B)   把B追加到A的内部的前面
$(A).prependTo(B) 把A追加到B的内部的前面
    
$(A).after(B)     把B添加到A的外部的后面(同级)
$(A).insertAfter(B)    把A追加到B的外部的后面(同级)
    
$(A).before(B)     把B添加到A的外部的前面(同级)
$(A).insertBefore(B)    把A追加到B的外部的前面(同级)
    
remove()      将标签对象及对象里面的元素全部删除
empty()       将标签对象里面的内容清空,但是调用这个方法的标签对象还在
    
$(A).replaceWith(B)   将A替换成B
$(A).replaceAll(B)    将B替换成A

克隆

clone()      复制标签的所有内容,但是不复制绑定的事件
clone(true)  复制标签的所有内容,包括事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="d1">嗨</button>
<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        $(this).clone(true).insertAfter($(this));
    })
</script>
</body>
</html>

事件

click   点击
hover   鼠标移动上去    不能用on绑定,可以用mouseenter和mouseleave实现效果
blur    光标移开
focus   光标
change  内容发生变化
keyup   键盘抬起
keydown 键盘按下
mouseover    如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发
mouseenter   不管有没有子标签都只触发一次
mouseleave   鼠标移开

// keydown  在jquery中查看键盘按键对应的值

<script>
    $(window).keydown(function (event) {
       console.log(event.keyCode)
    })
</script>    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <th></th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>aa</td>
            <td>
                <select>
                    <option value="1">上线</option>
                    <option value="2">下线</option>
                    <option value="3">停职</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>bb</td>
            <td>
                <select>
                    <option value="1">上线</option>
                    <option value="2">下线</option>
                    <option value="3">停职</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>cc</td>
            <td>
                <select>
                    <option value="1">上线</option>
                    <option value="2">下线</option>
                    <option value="3">停职</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>dd</td>
            <td>
                <select>
                    <option value="1">上线</option>
                    <option value="2">下线</option>
                    <option value="3">停职</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>ee</td>
            <td>
                <select>
                    <option value="1">上线</option>
                    <option value="2">下线</option>
                    <option value="3">停职</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

<script src="jquery.js"></script>
<script>
    var flag = false;
    $(window).keydown(function (event) {
        if (event.keyCode === 16) {
            flag = true
        }
    });
    $(window).keyup(function (event) {
        if (event.keyCode === 16) {
            flag = false
        }
    });

    $('select').change(function () {
        var bechecked = $(this).parent().siblings().first().find(':checkbox').prop('checked');
        if (flag && bechecked) {
            var value = $(this).val();
            var beselected = $('input:checked').parent().parent().find('select');
            beselected.val(value)
        }
    })
</script>
</body>
</html>

绑定

对象.事件(function(){})
对象.on('事件',function(){})

移除事件

off()
$('li').off('click')   将li标签移除点击事件

事件冒泡

  执行子标签绑定的事件,也会触发父级标签的事件

阻止事件冒泡

   在函数内最后 return false   或者 event.stopPropagation()

事件委托

$("tbody").on("click", ".fire", function (){     // tbody为fire的父级标签,将事件委托给父级标签
    $(this).parent().parent().remove()          // this触发的还是子标签
});

动画效果

show(毫秒数)
hide()
slideDown()   滑上滑下
slideUp()
slideToggle()
fadeIn()      淡入淡出
fadeOut()
fadeToggle()

each循环

li =[10,20,30,40]
$.each(li,function(i, v){      //  i是索引   v是数组中的每个元素
    console.log(i, v);
})

$('选择器').each(function(i,v){
    console.log(i,v)
})

终止循环

return false

data

.data('键','值')   设置值,封装数据
.data('键')        取值,没有的话返回undefined
removeData('键')   通过键移除值

 插件

$.extend({                           
    min:function(a, b){return a < b ? a : b;},   //自定义了一个min和max方法，min和max作为键，值是一个function
    max:function(a, b){return a > b ? a : b;},
});

$.min()     // 调用
$.max()
 
$.fn.extend({            // fn 标签对象 表示通过标签可以调用
min:function(a, b){return a < b ? a : b;}
});  

$('div').min()    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .cover {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.3);
            z-index: 99;
        }
        .user_msg {
            position: fixed;
            width: 600px;
            height: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div>
    <button id="all">全选</button>
    <button id="reverse">反选</button>
    <button id="cancel">取消</button>
</div>
<div>
    <button id="add_msg">添加记录</button>
</div>
<div class="cover hide"></div>
<div class="user_msg hide">
    姓名:<input type="text" id="user">
    爱好:<input type="text" id="hobby">
    <button id="commit">提交</button>
    <button id="qx">取消</button>
</div>
<table border="1">
    <thead>
        <tr>
            <th></th>
            <th>姓名</th>
            <th>爱好</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>抽烟</td>
            <td><button class="fire">删除</button></td>
            <td><button class="edit">编辑</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>李四</td>
            <td>喝酒</td>
            <td><button class="fire">删除</button></td>
            <td><button class="edit">编辑</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>王五</td>
            <td>烫头</td>
            <td><button class="fire">删除</button></td>
            <td><button class="edit">编辑</button></td>
        </tr>
    </tbody>
</table>

<script src="jquery.js"></script>
<script>
    //全选
    $('#all').click(function () {
        $(':checkbox').prop('checked',true);
    });
    //取消
    $('#cancel').click(function () {
        $(':checkbox').prop('checked',false)
    });
    //反选
    $('#reverse').click(function () {
        var checked = $('input:checked');
        var unchecked = $('input:not(:checked)');
        checked.prop('checked',false);
        unchecked.prop('checked',true);
    });
    //模态对话框
    $('#add_msg').click(function () {
        $('#user,#hobby').val('');
        $('.cover,.user_msg').removeClass('hide');
    });
    //提交 增加新纪录
    $('#commit').click(function () {
        $('.cover,.user_msg').addClass('hide');
        var name = $('#user').val();
        var hobby = $('#hobby').val();
        var $editTr = $(this).data('xyh');
        if ($editTr === undefined) {
            var new_tr = document.createElement('tr');
            if (name.length !==0 && hobby.length !==0) {
                $(new_tr).append('<td><input type="checkbox"></td>');
                $(new_tr).append('<td>'+ name +'</td>');
                $(new_tr).append('<td>'+ hobby +'</td>');
                $(new_tr).append('<td><button class="fire">删除</button></td>');
                $(new_tr).append('<td><button class="edit">编辑</button></td>');
                $('tbody').append(new_tr);
            } else {
                alert('内容不能为空!')
            }
        } else {
            $editTr.children().eq(1).text(name);
            $editTr.children().eq(2).text(hobby);
            $('#commit').removeData('xyh');
        }
    });

    // 模态对话框的取消
    $('#qx').click(function () {
        $('.cover,.user_msg').addClass('hide');
    });
    //删除  事件委托
    $('tbody').on('click','.fire',function () {
        $(this).parent().parent().remove()
    });

    // 编辑
    $('tbody').on('click','.edit',function () {
        $('.cover,.user_msg').removeClass('hide');
        var name_value = $(this).parent().prev().prev().prev().text();
        var hobby_value = $(this).parent().prev().prev().text();
        $('#user').val(name_value);
        $('#hobby').val(hobby_value);
        var $currentTr = $(this).parent().parent();
        $('#commit').data('xyh', $currentTr);
    })

</script>
</body>
</html>