jQuery基础

一、查找标签 -选择器

1.1 id选择器

$('#d1')  -- 同css

1.2 类选择器

$('.c1') 

1.3 元素选择器

$('标签名称') -- $('span')  

1..4 组合选择器

$('#d1,.c2')

示例:
    html代码
        <div id="d1"></div>
        <div class="c2">
            这是c2
        </div>
    css代码:
        #d1,.c2{
            background-color: red;
            height: 100px;
             100px;
            border-bottom: 1px solid black;
        }
  
  jquery代码:
      $('#d1,.c2').css('background-color','green');
      $('#d1,.c2')[1];  -- 索引为1的dom对象
      $('#d1,.c2').eq(1); -- 索引为1 的jquery对象

1.5 层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

1.6 属性选择器

html代码:
    <div class="c1" xx="oo">
        这是啥!
    </div>
css代码:
    [xx]{
        color:red;
    }

input标签:  type='xx'   [type='xx']--对应的input标签
$('[xx]').css('color','green');
$('[xx="oo"]').css('color','pink');

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

1.7 表单选择器

$(":text") // 找到所有input标签type属性值为text的标签
// $(":input") 找到所有input标签
// $(":password") 找到所有input且type=password的标签
// $(":radio") 找到所有input且type=radio的标签
// $(":checkbox") 找到所有input且type=checkbox的标签

html代码:
    <form action="">
        <input type="text" id="username">
        <input type="text" id="username2">
        <input type="password" id="pwd">

        <input type="submit">
    </form>
jquery代码:找到所有的type=text的input标签
    $(':text');

1.8 表单对象属性选择器

:checked 找到被选中的input标签
:selected 找被选中的select标签中的option标签
:disabled 不可操作的标签 
:enabled 可操作的标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

1.9 配合使用

$("div.c1")  // 找到有c1 class类的div标签

二、查找标签 -筛选器

html代码
    <ul>

        <li>谢一峰</li>
        <li class="c1">王子宇</li>
        <li>孙波</li>
        <li class="c2">石淦</li>
        <li>
            <span>白雪冰</span>
        </li>
        <li>方伯仁</li>

    </ul>

2.1 父亲元素

var c = $('.c1');
c.parent();
c.parents();  直系的祖先辈
c.parentsUntil('body');  往上找,直到找到body标签为止,不包含body标签

2.2 儿子元素 children()

var u = $('ul');
u.children();  找到所有儿子标签
u.children('.c1'); 找到符合.c1选择器的儿子标签

2.3 下一个元素

var c = $('.c1');
c.next();
nextAll();  下面所有兄弟
c.nextUntil('.c2');  下面到某个兄弟为止,不包含那个兄弟

2.4 上一个元素

var c = $('.c1');
c.prev();
c.prevAll(); 上面所有兄弟,注意顺序都是反的
c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟,注意顺序都是反的

2.5 siblings()

c.siblings();  找到不包含自己的所有兄弟
c.siblings('.c1');  筛选兄弟中有class类值为c1的标签

2.6 find() 找后代

$('li').find('span'); 等同于css的 li span选择器

2.7 first()和last() 和eq(索引值)

$('li').first();  找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个
$('li').eq(0);  按照索引取对应的那个标签,索引从0开始
$('li').eq(-1);  最后一个

三、文本操作

3.1 text() 和 html()

同js的innerText和innerHTML

取文本:
    c.text();  不带标签  
    c.html();  带标签
设置文本:
    c.text('文本');   还可以清空标签 $('#zhangyin').text('');
    c.html('文本'); -- 文本--"<a href=''>皇家赌场</a>"

3.2 val() 值

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置checkbox、select的值

示例1：

获取被选中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：

$("input[name='gender']:checked").val()

示例2：

HTML代码

 <input type="text" id="username">
    <input type="radio" class="a1" name="sex" value="1">男
    <input type="radio" class="a1" name="sex" value="2">女
    <input type="checkbox" class="a2" name="hobby" value="1">抽烟
    <input type="checkbox" class="a2" name="hobby" value="2">喝酒
    <input type="checkbox" class="a2" name="hobby" value="3">烫头
    <select name="city" id="s1">
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
    </select>
    <select name="lover" id="s2" multiple>
     <option value="1">波多</option>
     <option value="2">苍井</option>
     <option value="3">小泽</option>
    </select>

jquery代码:

获取值：
 文本输人框：$('#username').val();
     var username = $('#username').val();
     var reg = /^a/;
     reg.test(username);  // 符合正则规则，得到true，不符合得到false
 单选radio框：$('.a1:checked').val();
 多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
 var d = $(':checkbox:checked');
 # 遍历：方式1  
 for (var i=0;i<d.length;i++){
     console.log(d.eq(i).val());
 }
 方式2：
     $.each(ele,function(k,v){
       console.log(k,v);
    })
 单选select框：$('#city').val()；
 多选select框：$('#lover').val();

设置值：
 文本输入框：$('#username').val('you are my love');
 单选radio框：$('.a1').val([2]); #注意内容必须是列表，写的是value属性对应的值
 多选checkout框：$('.a2').val(['2','3'])
 单选select框：$('#city').val('1')；
 多选select框：$('#lover').val(['2','3'])

点击事件绑定

  $('.c1').click(function () {
        //$(this)表示的就是它自己
        $(this).css('background-color','green');
        // $('.c1').css('background-color','green');
    })

四、 样式操作

4.1 class类值操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

html代码
    <div class="c1">
    
    </div>
css代码:
       .c1{
            background-color: red;
            height: 100px;
             100px;
        }
        .c2{
            background-color: green;
        }
jquery
$('div').addClass('c2');
$('div').removeClass('c2');
$('div').toggleClass('c2');
示例:
    var t = setInterval("$('div').toggleClass('c2');",500);

4.2 CSS 操作

css("color","red")//DOM操作：tag.style.color="red"

示例

$("p").css("color", "red"); //将所有p标签的字体设置为红色

4.3 位置

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

4.4 尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

五、文档操作

html代码:

<div class="c1">
   <h1>xx</h1>
</div>

5.1  标签内部的后面插入内容 append

$('.c1').append('<a href="http://www.baidu.com">百度</a>');

5.2 标签内部的上面插入内容 prepend

$('.c1').prepend('<a href="http://www.baidu.com">百度</a>');
$('.c1').prepend('<h1>亚洲</h1>');

5.3  标签外部的下面插入内容 after

$('.c1').after('<h1>兄弟</h1>');

5.4 标签外部的上面插入内容 before

$('.c1').before('<h1>兄弟</h1>');

简单示例:

var s = $('<div>',{'class':'c2','text':'彭于晏'});
$('.c1').after(s);

六、 标签操作

6.1 创建标签

添加标签:  $('.c1').html('<a href="http://www.baidu.com">百度</a>'); 但是这个属于替换内容,将标签内原来的内容全部替换掉.

js
    var a = document.createElement('a');
    
jquery:
    $('<a>',{
            text:'这还是个链接',
            href:'http://www.baidu.com',
            class:'link',
            id:'baidu',
            name:'baidu'
    })

6.2 清空标签 empty

方式1:$('.c1').empty();
方式2:$('.c1').html(''); .text('')

6.3 remove删除标签

$('.c1').remove();

6.4 字符占位符${变量名}

var tr_str = `<tr><td><input type="checkbox"></td><td>${inp_name}</td><td>${inp_hobby}</td><td><button class="delete">删除</button></td></tr>`;

七、页面载入事件

没有页面载入事件的时，当script标签写在head标签中时，浏览器从上到下编译代码时，会导致js用到html标签中的id等属性时失败，从而导致js代码失效；

7.1 原生js的页面载入

xx.js中的页面载入事件会覆盖掉html中的页面载入事件，导致 d1 和  d2 绑定的事件失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 100px;
            width: 100px;

        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;

        }
        #d3{
            background-color: pink;
            height: 200px;
            width: 200px;
        }

    </style>
    <script src="../jquery.js"></script>

    <script>
        // 原生js的页面载入, 等页面资源(整个html文件、静态文件(js、css、img、视频))全部加载完毕之后再执行这个函数,注意，window.onload存在覆盖现象
        
        // jquery的页面载入事件
        window.onload = function(){
            $('#d1').click(function () {
                $(this).css({'background-color':'yellow'});
            });

            $('#d2').click(function () {
                $(this).css({'background-color':'black'});
            });
        }

    </script>
    <script src="xx.js"></script>
</head>
<body>

<div id="d1"></div>
<div id="d2"></div>

<div id="d3"></div>


</body>

</html>

xx.js

window.onload = function(){
    var d3Ele = document.getElementById('d3');
    d3Ele.onclick = function(){
        this.style.backgroundColor = 'purple';
    };
};

7.2 jquery的页面载入

当页面资源(不包括图片或视频等资源)加载完成之后触发，并且不存在覆盖现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            background-color: red;
            height: 100px;
            width: 100px;

        }

        #d2 {
            background-color: green;
            height: 100px;
            width: 100px;

        }

        #d3 {
            background-color: pink;
            height: 200px;
            width: 200px;
        }

    </style>
    <script src="../jquery.js"></script>

    <script>
        // // jquery的页面载入事件   当页面资源(不包括图片或视频等资源)加载完成之后触发，并且不存在覆盖现象
        $(document).ready(function () {
            $('#d1').click(function () {
                $(this).css({'background-color': 'yellow'});
            });

            $('#d2').click(function () {
                $(this).css({'background-color': 'black'});
            });
        })

    </script>
    <script src="xx.js"></script>
</head>
<body>

<div id="d1"></div>
<div id="d2"></div>

<div id="d3"></div>



</body>
<!-- 所以还是建议将js代码放到文档最下面，但是别超过html标签 -->
</html>

xx.js

$(document).ready(function () {
    var d3Ele = document.getElementById('d3');
    d3Ele.onclick = function () {
        this.style.backgroundColor = 'purple';
    };
})

八、事件冒泡

 

点击儿子标签会触发父级标签祖父标签..等等的所有点击事件,这叫事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: pink;
            height: 200px;
        }
        .c2{
            background-color: purple;
            height: 100px;
            width: 100px;
        }

    </style>

</head>
<body>

<div class="c1">
    <div class="c2"></div>
</div>



</body>
<script src="jquery.js"></script>
<script>

    // 事件冒泡，当父级标签和子标签绑定了相同的事件时，点击子标签时会触发子标签的点击事件，并且会一直往外层触发外层标签的相同事件
    $('.c1').click(function () {
        alert('这是父级标签');
    });
    $('.c2').click(function () {
        alert('这是子标签');

        return false; // 阻止事件冒泡
    })
    
</script>

</html>

九、事件委托

事件委托(基于事件冒泡)给父级或者祖父级等..，点击子标签的点击事件时，触发了父级标签的点击事件
普通绑定事件，只能点击第一个点击脱衣才能增加（页面加载时，只有第一个），而事件委托则是所有的都可以增加；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<div class="c1">
    <button class="jiazhong">点击脱衣</button>

</div>


</body>

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

    //绑定事件的方式1：
    // $('.jiazhong').click(function () {
    //
    //     // append
    //     $('.c1').append("<button class='jiazhong'>点击脱衣</button>");
    //
    //
    // });
    // // 方式2
    // $('.jiazhong').on('click',function () {
    //     $('.c1').append("<button class='jiazhong'>点击脱衣</button>");
    //
    // });


    //  事件委托(基于事件冒泡)
    // on进行事件绑定，参数： 事件名称字符串，委托人选择器，事件要做的事情
    $('.c1').on('click', '.jiazhong',function () {
        $('.c1').append("<button class='jiazhong'>点击脱衣</button>");

    })

</script>

</html>

十、属性操作

10.1 attr方法

$('div').attr({'xx':'oo', 'xx2':'oo2'});  // 设置属性
$('div').attr('xx'); // 查看属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

10.2 prop属性操作

用于checkbox和radio

selected checked disabled enabled
设置属性
    $('#d1').prop('checked',true);    选中
    $('#d1').prop('checked',false);   取消选中
查看属性
    $('#d1').prop('checked'); true表示选中了,false表示未选中

prop() // 获取属性
removeProp() // 移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

十 一、逻辑运算符

and  &&
or   ||
not  !

十 二、全选反选取消的代码示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
 <thead>
 <tr>
 <th>#</th>
 <th>姓名</th>
 <th>爱好</th>
 </tr>
 </thead>
 <tbody>
    <tr>
 <td><input type="checkbox"></td>
 <td>金老板</td>
 <td>开车</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>景女神</td>
 <td>茶道</td>
 </tr>
 <tr>
 <td><input type="checkbox"></td>
 <td>苑昊（苑局）</td>
 <td>不洗头、不翻车、不要脸</td>
 </tr>
 </tbody>
</table>
<script src="jquery.js"></script>
<script>

    $('#all').click(function () {
        $('[type="checkbox"]').prop('checked',true);

    });
    $('#cancel').click(function () {
        $('[type="checkbox"]').prop('checked',false);

    });

    // 反选
    $('#reverse').click(function () {

        var all_inp = $('[type="checkbox"]');
        for (var i=0;i<all_inp.length;i++){
            var status = all_inp.eq(i).prop('checked');
            // if (status){
            //     all_inp.eq(i).prop('checked',false);
            // }else{
            //     all_inp.eq(i).prop('checked',true);
            // }

            // 简写方式
            all_inp.eq(i).prop('checked',!status);

        }


    })



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

十三、常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: yellow;
            height: 200px;
            width: 200px;
        }
        .c2{
            background-color: greenyellow;
        }
    </style>

</head>
<body>

<input type="text" id="username">
<div id="d1" class="c1">

</div>

<input type="text" id="kw">


</body>

<script src="jquery.js"></script>
<script>
    // 获取光标时触发的事件
    $('#username').focus(function () {
        $(this).css({'background-color':'pink'});
    });
    // 失去光标时触发的事件
    $('#username').blur(function () {
        $(this).css({'background-color':'purple'});
    });


    // hover事件，鼠标悬浮事件
    $('#d1').hover(
        // 鼠标进入时触发的事件
        function () {
            console.log(this);
            $(this).addClass('c2')
            // $('#d1').addClass('c2')
        },
        // 鼠标离开时触发的事件
        function () {
            // $('#d1').removeClass('c2');
            $(this).removeClass('c2');
        }
    );

    //input事件，实时监听用户输入内容，必须用on绑定
    $('#kw').on('input', function () {
        console.log($(this).val());
    })






</script>

</html>