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;
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'])
属性的操作
.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)
事件冒泡
儿子父亲都被绑定,会一层层网上冒泡出发父事件执行.
事件委托
利用事件冒泡原理,
做一篇有温度的技术博客
给人奋斗的热意
和生活的暖意
