jQuery入门

jQuery

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

jQuery引入

本身是一个js文件

网络地址引入
script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">

本地文件引入
         
另起一个script标签来写script代码
或写在js文件里,
再
导入

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代码

jquery代码

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

进一步选择

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

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

:first   第一个
:last    最后一个
:eq(index)  按照索引
:has(选择器)  包含某个子代的父标签
:not(选择器)  排除

$("选择器").筛选器方法

html代码

    
迪丽热巴
    
唐艺昕
    
吴彦祖
    
彭于晏
    

        张天爱
    
    
吴亦凡

.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('标签'); -- 文本--"皇家赌场"

.has() 包含某个子代的父标签

.filter('#l2') 包含某个选择器的当前标签

.not(选择器) 不包含某个选择器的当前标签

操作

标签的操作

创建标签

$('')

append/prepend添加标签

html代码:

    

        
1
        
2
        
4
        
5
    



添加

jQuery代码:

$('#b2').click(function () {
    last = $('
')     //生成一个标签
     li.text('3')        //文本为3
     $('li:eq(2)').before(li) //在第..前加..
}) 
    // $('li:eq(1)').after(li)在第..后加..

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

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

a.after(b)   // 在a标签后面添加b标签
a.before(b)  // 在a标签前面添加b标签

父标签 . append(子标签)

子标签添加到父标签的子代的最后

子标签. appendTo(父标签)

子标签添加到父标签的子代的最后

父标签 . prepend(子标签)

子标签添加到父标签的子代前面

子标签.prependTo(父标签)

子标签添加到父标签的子代前面

a.after(b)

在a标签后面添加b标签

a.before(b)

在a标签前面添加b标签

detach/remove 删除标签

html代码:

    

        
1
        
2
        
4
        
5
    



删除

jQuery代码:

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



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

detach append 删除恢复标签

html代码:

    

        
1
        
2
        
4
        
5
    



删除
恢复

jQuery代码:

var last

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

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

empty append 清空恢复标签

html代码:

    

        
1
        
2
        
4
        
5
    



清空
恢复

jQuery代码:

var last

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

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

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

html代码:

    

        
1
        
2
        
4
        
5
    



克隆

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())
})

替换

a.replaceWith(b)    //  用b替换a
b.replaceAll(a)     //  用b替换a   a可以是标签 选择器

replaceWith(b) 替换标签

html代码:

    

        
1
        
2

    




替换

jQuery代码:

    $('#b1').click(function () {
        var l2 = $('li:last')
        var li = l2.clone()

        li.text(Number(li.text()) + 1)

        // l2.replaceWith(li)
        li.replaceAll('li:eq(1)')

    })


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

    })

值操作

值的操作

val()

class类值操作

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

html代码

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代码：

    
    男
    女
    抽烟
    喝酒
    烫头
    
     北京
     上海
     深圳
    
    
     波多
     苍井
     小泽

jquery代码

获取值：
 文本输人框：$('#username').val();
 单选radio框：$('.a1:checked').val();    checked 代表被选中的

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

属性的操作

.attr('属性')         // 获取属性的值
.attr('属性','值')    // 设置把HTML元素我们自己自定义的DOM属性
.removeAttr('属性')   // 删除某个属性

.prop('checked')      //radio checkbox  select(option)   
.prop('checked',true)  //设置HTML元素本身就带有的固有属性  

事件绑定

click(function () 点击

jQuery绑定

jQuery中的click 当点击按钮时执行一段 JavaScript

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



$('button').bind('click',function () {           另一种方法
    })    


$('button').unbind('click')                      解绑

js绑定

js中的onclick等同于jQuery中的click

var b1 = document.getElementById('b1');  用id获取doc对象
b1.onclick = function () {
    alert(456)
}

focus(function () 获取焦点

当 字段获得焦点时发生 focus 事件

$('#i1').focus(function () {
    console.log('聚焦了')
    $(this).val('')
    $(this).next().remove()
})

blur(function () 失去焦点时触发

 $('#i1').blur(function () {
        console.log('失去焦点了')
        if ($(this).val() === '') {
            var sp = $('')
            sp.text('不能为空')
            $(this).after(sp)

        }
    })

change(function () 内容变化

$('#s1').change(function () {
    console.log('内容变化了')
})

keyup(function (e) 按键启动

$('#i1').keyup(function (e) {     //function拿到的第一个参数是按键的键名
    // console.log(e.keyCode)
    if (e.keyCode === 27) {       //利用keyup中的keyCode方法拿键的ascii码
    alert(123)
}`
})

hover(function () 鼠标悬浮

$('.fa').hover(function () {
        console.log('悬停了')
    }, function () {
        console.log('不悬停了')
    })


同以下
$('.fa').mouseenter(function () {
    console.log('鼠标进来了')
})

$('.fa').mouseleave(function () {
    console.log('鼠标出去了')
})


或
$('.fa').mouseover(function () {
    console.log('鼠标过来了')
})

alert 添加事件

html代码:

    

        
1
        
2
        
4
        
5
    



自增

jQuery代码:

$('li').click(function () {
    alert($(this).text())
})
   // $('li:eq(1)').after(li)   

事件冒泡

儿子父亲都被绑定,会一层层网上冒泡出发父事件执行.

事件委托

利用事件冒泡原理,

​