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 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的标签

进一步选择

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

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

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

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

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>"

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

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

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

操作

标签的操作

创建标签

$('<a>')

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>')     //生成一个标签
     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代码:

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

替换

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

replaceWith(b) 替换标签

html代码:

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

    </ul>

</div>


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

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

<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); //背景闪烁跳动

背景闪烁跳动

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'])

属性的操作

.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 = $('<span>')
            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代码:

<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())
})
   // $('li:eq(1)').after(li)   

事件冒泡

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

事件委托

利用事件冒泡原理,

​