jQuery基础总结(后续整理)

jQuery

jQuery：是一个javascript库
核心理念是write less,do more(写得更少,做得更多)
内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM的操作会更加简单，兼容性更好

jQuery引入

本身是一个js文件

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
</script>

本地文件引入
    <script src="jquery.js"></script>     
另起一个script标签来写script代码
或写在js文件里,
再
<script src="test3(3).js"></script>导入

JQuery和dom对象的转换

$  ==  Jquery
dom对象 _>  jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]

选择器

$('#d1') id选择器

var d1 = $('#d1');       -- jquery对象  -- jQuery.fn.init [div#d1]
a.css({"background-color":"blue","height":"300px"})

var d = document.getElementById('d1');  -- 原生dom对象

jquery对象和dom对象之间不能调用互相的方法

a[0] -- dom对象
$(d) -- jquery对象

$('.c1') 类选择器

$('span') 元素选择器

$('标签名称')

$('#d1 , .c2') 组合选择

$('#d1,.c2').css('background-color','green');  并集
$('#d1.c2').css('background-color','green');   交集

$('#d1,.c2')[1];  -- 索引为1的dom对象

$('#d1,.c2').eq(1); -- 索引为1 的jquery对象

$("div span")层级选择器

后代选择器 $('div span')
子代选择器 $('#li>span')
子代选择器 $('#li+span')
弟弟选择器 $('#li~span')

$('[xx]') 属性选择器

$('[xx]').css('color','green');
$('[xx="oo"]').css('color','pink');
$('[属性^="值"]')  开头
$('[属性$="值"]')  结尾
$('[属性*="值"]')  包含

表单选择器

html代码

<form action="">
    <input type="text" id="username">
    <input type="password" id="pwd">
    <input type="submit">
</form>

jquery代码

$(":input")    找到所有input标签
$(':text')     找到所有input且type=text的标签
$(":password") 找到所有input且type=password的标签
$(":radio")    找到所有input且type=radio的标签
$(":checkbox") 找到所有input且type=checkbox的标签

筛选器

$("选择器:筛选器")

$("选择器:筛选器")
$("选择器:筛选器")
$("选择器:筛选器")
$("选择器:筛选器")

筛选器方法(一步筛选)

html代码

<ul>

    <li>迪丽热巴</li>
    <li class="c1">唐艺昕</li>
    <li>吴彦祖</li>
    <li class="c2">彭于晏</li>
    <li>
        <span>张天爱</span>
    </li>
    <li>吴亦凡</li>
</ul>

parent() 找父标签

 var c = $('.c1');
c.parent();
父标签

c.parents();  
直系的祖先辈

c.parentsUntil('body'); 
往上找,直到找到哪个标签为止
不包含body标签

children() 找子标签

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

next() ：找下面的兄弟

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

prev() 找上面的兄弟

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

siblings()

c.siblings();  找到自己的所有兄弟
c.siblings('.c1');  筛选兄弟中有class值为c1的标签（可以组合）

find() 找后代

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

first()/last()

$('li').first();  找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个

eq(索引值)

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

text() 和 html()

同js的innerText和innerHTML

取文本

c.text();  不带标签
c.html();  带标签

设置文本

c.text('文本')
c.html('标签'); -- 文本--"<a href=''>皇家赌场</a>"

值操作

class类值操作

操作样式一般通过class而不是id

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);

背景闪烁跳动

var t = setInterval("$('div').toggleClass('c2');",500);

val值操作

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();
 单选radio框：$('.a1:checked').val();    checked 代表被选中的

 多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
 var d = $(':checkbox:checked');
 for (var i=0;i<d.length;i++){
 console.log(d.eq(i).val());
 }

 单选select框：$('#city').val()；
 多选select框：$('#lover').val();

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

click(function () 点击事件绑定

jQuery绑定

点击事件绑定：
$('.c1').click(function () {
        //$(this)表示的就是它自己
        $(this).css('background-color','green');
        // $('.c1').css('background-color','green');
//    $("#d1").css({"background-color":"blue","height":"800px"})
    })

js绑定

标签的操作

append/prepend添加标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b0">添加</button>

jQuery代码:

$('#b2').click(function () {
    last = <li>5</li>  //有点错误
    $('ul').append(last)
})

父标签 . append(子 标签) //子标签添加到父标签的子代的最后
子标签. appendTo(父标签) //子标签添加到父标签的子代的最后

父标签 . prepend(子标签)  //子标签添加到父标签的子代前面
子标签.prependTo(父标签)  //子标签添加到父标签的子代前面

alert 添加事件

1

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b0">自增</button>

jQuery代码:

$('li').click(function () {
    alert($(this).text())
})

2

3

detach/remove 删除标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b1">删除</button>

jQuery代码:

detach删除,可恢复事件:
$('#b1').click(function () {
    last = $('li:last').detach()
})



remove删除,不可恢复事件1:
$('#b3').click(function () {
    $('li').remove()
})

detach append 删除恢复标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b1">删除</button>
<button id="b2">恢复</button>

jQuery代码:

var last

$('#b1').click(function () {
    last = $('li:last').detach()
})

$('#b1').click(function () {
    last = $('li:last').detach()
})

empty append 清空恢复标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b3">清空</button>
<button id="b2">恢复</button>

jQuery代码:

var last

$('#b3').click(function () {
    last = $('ul').empty()
})
清空标签中的内容

$('#b2').click(function () {
    $('ul').append(last)
})

clone(ture) 克隆(和事件)标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>

<button id="b4">克隆</button>

jQuery代码:

$('#b4).click(function () {
    var li = $('li:last').clone(true)
    li.text(Number(li.text()+1))
    $('ul').append(li)
})

$('li').click(function () {
    alert($(this).text())
})

clone(ture) 克隆(和事件)标签

html代码:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

<button id="b6">替换</button>

jQuery代码:

$('#b6').click(function () {
    var l2 = $('li:last')
    li.text(Number(li.text()+1))
    $('ul').append(li)
})

$('li').click(function () {
    alert($(this).text())
})

属性的操作

html:

.attr('属性') // 获取属性的值
.attr('属性’，'值') 1// 设置属性的值
.removeAttr(' 属性') //-删除nl

$  ==  Jquery
dom对象 _>  jq对象
$(dom对象)
jq对象 _> dom对象
jq对象[0]

来源：https://www.cnblogs.com/-xct/p/12012834.html