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;
            width: 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;
            width: 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>