前端 -- jquery

jQuery是什么

是高度封装了js代码的模块（效率相对低）

封装了dom节点
封装了操作dom节点的简便方法

jQuery的优势

使js代码对浏览器的兼容性做的更好了

jQuery 的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用

jQuery的导入

https://code.jquery.com/jquery-3.4.1.js　　未压缩版
https://code.jquery.com/jquery-3.4.1.min.js　　压缩版
下载:保存在本地文件里
引入:<script src="文件名"></script>

$和jQuery的关系

$就是jQuery名字的简写，实际上是相同的

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住

jQuery对象和DOM对象的关系和转换

jQuery封装了DOM

DOM转成jQuery：　　jQuery(DOM对象) 或 $(DOM对象)

jQuery转成DOM：　　jQuery对象[index]

jQuery选择器

基本选择器

$("#id")         //id选择器
$("tagName")     //标签选择器
$(".className")  //class选择器
$("*")           //通用选择器
$("div.c1")      // 交集选择器 找到有含有c1类的div标签
$("#id, .className, tagName") //并集选择器

层级选择器

$("x y"); // 后代选择器 找x的所有后代y（子子孙孙）
$("x > y"); // 子代选择器 找x的所有儿子y（儿子）
$("x + y") // 毗邻选择器 找所有紧挨在x后面的y
$("x ~ y") // 弟弟选择器 找x之后所有的兄弟y

属性选择器

$('[属性名]')         必须是含有某属性的标签
$('a[属性名]')        含有某属性的a标签
$('选择器[属性名]')    含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]')  属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]')  属性值以xxx结尾的
$('选择器[属性名^="xxx"]')  属性值以xxx开头的
$('选择器[属性名*="xxx"]')  属性值包含xxx
$('选择器[属性名1][属性名2="xxx]')  拥有属性1,且属性二的值='xxx',符合前面选择器要求的

筛选器

基础筛选器

用法： $('选择器：筛选器')

作用于选择器选择出来的结果

$('选择器:筛选器')
$('选择器:first')
作用于选择器选择出来的结果
first      找第一个
last       最后一个
eq(index)  通过索引找
even       找偶数索引
odd        找奇数索引
gt(index)  大于某索引的
lt(index)  小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)

表单筛选器

type筛选器

根据input的type标签进行筛选

$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

状态筛选器

$(':disabled')
$(':enabled')
$(':checked')
$(':selected')

jQuery的筛选器方法

找兄弟 :$('ul p').siblings()
找哥哥
$('ul p').prev()             找上一个离我最近的哥哥
$('ul p').prevAll()          找所有哥哥
$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了
找弟弟 : next()  nextAll()   nextUntil('选择器')
找祖宗 : parent()  parents()   parentsUntil('选择器')
找儿子 : children()

再进一步的筛选方法

first()
last()
eq(index)
not('选择器')   去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器')  后代选择器 找所有结果中符合选择器要求的后代
has('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

标签的文本操作

text()

$('li:first').text()    获取第一个li的值
$('li:first').text('wahaha')    设置第一个li的值

html()　　（可以直接设置值为标签/DOM对象/jquery对象）

$('li:first').html()    获取第一个li的值
$('li:first').html('wahaha')    设置第一个li的值

标签的操作

增加

如果被添加的标签原本就在文档树中，就相当于移动

父子关系的增加

前面的括号里要求是jq对象，后面的括号中都可以

追加儿子

(父).append(子) 
(子).appendTo(父)

头部添加

(父).prepend(子) 
(子).prependTo(父)

兄弟关系的增加

增加哥哥

参考点.before(要插入的)     
要插入的.insertbefore(参考点)

增加弟弟

参考点.after(要插入的)      
要插入的.insertAfter(参考点)

删除

remove　　删除标签和事件，被删掉的对象做返回值

detach　　删除标签，保留事件，被删掉的对象做返回值

empty　　清空内容标签，自己被保留

修改

replaceWith　　a.replaceWith(b)　　用b替换a

replaceAll　　a.replaceAll(b)　　用a替换b

复制

var btn = $(this).clone()　　克隆标签，但不克隆事件

var btn = $(this).clone(true)　　克隆标签和事件

标签的属性操作

attr

获取属性的值
$('a').attr('href')
设置/修改属性的值
$('a').attr('href','http://www.baidu.com')
设置多个属性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})

removeAttr

$('a').removeAttr('title')    删除title属性

prop

如果一个标签只有true和false两种情况,适合用prop处理（checkbox redio）
$(':checkbox:checked').prop('checked')    获取值
$(':checkbox:checked').prop('checked',false)    表示取消选中
如果设置/获取的结果是true表示选中,false表示取消选中

类的操作

添加类　　addClass

$('div').addClass('red')        //添加一个类
$('div').addClass('red bigger') //添加多个类

删除类　　removeClass

$('div').removeClass('bigger')  //删除一个类
$('div').removeClass('red bigger')  //删除多个类

转换类　　toggleClass（有即删，无即加）

$('div').toggleClass('red')      
$('div').toggleClass('red bigger')

val值的操作

$对象.val()   获取值 针对表单内的元素
val('内容')   设置值 针对表单内非选择框
val([1])     设置值 针对表单内的选择框

对于选择框：设置选中的值需要放在数组中：$(':radio').val([1])

对于输入框：输入/设置什么，就获取什么

css样式

css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})

$('div').css('background-color','red')           //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式

滚动条

scrollTop　　垂直滚动条距离顶部的距离　　$(window).scrollTop()

scrollLeft　　水平滚动条距离左侧的距离　　$(window).scrollLeft()

盒子模型

内容宽高 : width和height

内容+padding ： innerWidth和innerHeight

内容+padding+border ： outerWidth和outerHeight

内容+padding+border+margin ： outerWidth(true)和outerHeight(true)

设置值：变的永远是content的值

表单

$(':submit').click(
    function () {
        return false
    }
)

给submit绑定事件，如果对应函数的返回值是false，表单就不提交了

jQuery动画

show系列

show 显示　　hide 隐藏　　toggle 切换

slide滑动系列

slideUp 向上滑动　　slideDown 向下滑动　　slideToggle(时间，回调函数) 切换(动画在规定时间完成后执行回调函数)

fade淡入淡出系列

fadeOut 淡出　　fadeIn 淡入　　fadeToggle 切换

动画的停止

stop 永远在新的动画开始之前停止上一个动画

jquery事件的绑定

<body>
    <button>点击1</button>
    <button>点击2</button>
</body>

<script src="jquery.3.4.1.js"></script>
<script>
    $('button').click(
        function () {
            alert('你点了我一下!')
        }
    )
</script>

通过bind绑定

参数都是选传的，通过e.data接收参数

$('button').bind('click',{'a':'b'},fn)
function fn(e) {
    console.log(e.data)
    console.log(e.data.a)
}

$('button').bind('click',fn)
function fn(e) {
    console.log('wahaha')
}

用简写的事件名称当方法名

$('button').click({'a':'b'},fn)
function fn(e) {
    console.log(e.data)
    console.log(e.data.a)
}

$('button').click(fn)
function fn(e) {
    console.log('wahaha')
}

解除绑定

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

各种事件

console.log(arguments) 帮助查看想不起来的函数参数都有哪些

事件名	说明
click(function(){...})	单击事件
blur(function(){...})	失去焦点事件
focus(function(){...})	获得焦点事件
change(function(){...})	input框鼠标离开时内容已经发生改变时触发
keyup(function(){...})	按下的键盘触发事件(通过ASCII码)，27对应的是ESC 获取键盘编号：额。keyCode
mouseover/mouseout	如果给父元素绑定了over事件，那么这个父元素如果有子元素，每一次进入子元素也会触发父元素的over事件
mouseenter/mouseleave = hover(function(){...})	鼠标的悬浮事件

事件冒泡

<style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: forestgreen;
        }
    </style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

<script>
    $('.outer').click(
        function () {
            alert('outer')
        }
    )
    $('.inner').click(
        function (e) {
            alert('inner')
            // e.stopPropagation() //阻止事件冒泡方法1
            return false    //阻止事件冒泡方法2
        }
    )
</script>

示例

事件触发顺序是由内到外的，这就是事件冒泡，虽然只点击子元素，但是它的父元素也会触发相应的事件，因为子元素在父元素里面，点击子元素也就相当于变相的点击了父元素

阻止冒泡方法

return false
e.stopPropagation()

事件委托

$('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不许点')
    })

示例

相当于把button元素的点击事件委托给了父元素div

后添加进来的button也能拥有click事件

页面的加载

（加载顺序是由上至下，如果在上面绑定了事件但绑定事件的标签在下面，绑定就无法触发了）

onload

window.onload = function(){绑定事件}

onload要等到所有的文档/音视频都加载完毕后再触发，耗费时间长

onload只能绑定一次

jquery方式

$(document).ready(function(){文档在加载完毕要做的事情})　　(正常)

$(function(){文档在加载完毕后要做的事情})　　(简写，使用)

jquery的方式，只等待文档加载完毕之后就可以运行

each

<body>
    <ul>
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
</body>
<script>
    $('li').each(
        function (ind,dom) {      //主动传ind是每项的索引,dom是每一项的标签对象
            console.log(ind,dom)
        }
    )
</script>