jquery介绍

jquery介绍

jquery的优势

1.js代码对浏览器的兼容性做的更好了
2.隐式循环
3.链式操作

jquery是什么?

高度封装了js代码的模块
	封装了dom节点
	封装了操作dom节点的简便方法

jquery的导入

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

$和jQuery的关系

$就是jQuery名字的简写,实际上是一回事儿

jquery对象和dom对象的关系和转换

jquery封装了dom
dom转成jquery : jQuery(dom对象)  $(dom对象)
jquery转成dom : jq对象[index]

jquery选择器

基础选择器

#id选择器   .类选择器  标签选择器   *通用选择器
$('#city')
k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0)
$('.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('li')
k.fn.init(4) [li, li, li, li, prevObject: k.fn.init(1)]0: li1: li2: li3: lilength: 4prevObject: k.fn.init [document]__proto__: Object(0)
$('a')
k.fn.init(2) [a, a, prevObject: k.fn.init(1)]0: a1: alength: 2prevObject: k.fn.init [document]__proto__: Object(0)
$('*')
k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script, prevObject: k.fn.init(1)]

div.c1交集选择器      div,p并集选择器
$('div.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('div,p,a')
k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)]                           

层级选择器

空格 后代选择器    >子代选择器 +毗邻选择器  ~弟弟选择器
$('div li')
$('div>ul>li')
$('.baidu+li')
k.fn.init [prevObject: k.fn.init(1)]
$('.baidu~li')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]

属性选择器

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

jquery筛选器

基础筛选器

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

表单筛选器

type筛选器

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

状态筛选器

enabled
disabled
checked
selected

$(':disabled')
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$(':enabled')
jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('input:checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]

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('选择器')   通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

补充内容

// 1.不要用for(i in li_list){}的方式循环一个jq对象
for(let i=0;i<li_list.length;i++){   //let 声明的变量的作用域只在for循环中
        console.log(i)
}

jquery介绍

引入:
<script src='路径'></script>
jquery是一个对js操作dom对象进行了高度封装的库
查找标签\操作标签(操作属性\文本)
jQuery的本质就是一个类,简写就是$
如何创建jquery对象 :
   $('选择器')
   $(dom对象)
使用 :
	对象.方法名
	对象.属性
jq->dom
	jq[index]
dom->jq
	$(dom对象)

查找标签

选择器

基础选择器 : # . 标签名 *  div.c1交集  div,p并集
层级选择器 : 空格(后代) >(子代) +(毗邻) ~(弟弟)
属性选择器 : [属性名]  [属性名="属性值"] [属性名^="开头"] [属性名$="结尾"] [属性名*="包含"] 
           [属性名!="不等于"]

筛选器

基础筛选器 :first last eq(index) even(偶数) odd(奇数) gt(index)大于 lt(index)小于 
          not('选择器')不等于  has('选择器')如果有后代满足选择器要求就把当代选出来
表单筛选器 :text password radio checkbox file reset submit button
          checked selected disabled enabled

筛选器方法

兄弟: siblings() 
找弟弟:next(),nextAll(),nextUntil('选择器')
找哥哥:prev(),prevAll(),prevUntil('选择器')
找祖辈:parent(),parents(),parentsUntil('选择器')
找儿子:children()
筛选 :first() last() eq(index) 
     not('选择器')
     filter('交集')
     find('后代')
     has('拥有后代的当代')

事件的绑定
jquery操作标签
	操作文本 : <>文本内容<>
	操作标签 : 添加 删除 修改 克隆 
	操作属性 : 通用属性 类 css样式 value 盒子模型 滚动条  

事件的绑定

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

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

标签的文本操作

text()
$('li:first').text()         // 获取值
$('li:first').text('wahaha') // 设置值

$('li:last').html()          // 获取值
$('li:last').html('qqxing')  // 设置值

$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a标签

var a = document.createElement('a')
a.innerText = '我是AD钙'
$('li:last').html(a)     //a 是dom对象

var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj)   //jqobj是jquery对象

标签的操作

增加

父子关系:
	追加儿子 :(父).append(子) (子).appendTo(父)
	头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
	添加哥哥 :参考点.before(要插入的)     要插入的.insertbefore(参考点)
	添加弟弟 :参考点.after(要插入的)      要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动
例子append
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append(jq)
    
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append(jq[0])
   
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append('<li>鹿晗</li>')
    
例子appendTo
	var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo('ul')
    
    var dom_ul = document.getElementsByTagName('ul')[0]
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo(dom_ul)
    
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo($('ul'))
   
对已经存在的内容进行添加 -- 移动
   $('li:first').appendTo('ul')
$('li:last').prependTo('ul')
$('ul').prepend('<li>李东宇</li>')
$('<li>邓帅</li>').prependTo('ul')
$('#l2').before('<li>李东宇</li>')
$('<li>李东宇222</li>').insertBefore('#l2')

$('#l2').after('<li>邓帅</li>')
$('<li>邓帅222</li>').insertAfter('#l2')

删除 修改 克隆

删除 : remove detach empty
remove : 删除标签和事件,被删掉的对象做返回值
detach : 删除标签,保留事件,被删掉的对象做返回值
empty : 清空内容标签,自己被保留

修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b)  用b替换a
replaceAll : a.replaceAll(b)    用a替换b

复制 : clone
var btn = $(this).clone()      //克隆标签但不能克隆事件
var btn = $(this).clone(true)  //克隆标签和事件
var obj = $('button').remove()
obj是button标签,但是事件已经被删除了

var  a = document.createElement('a')
a.innerText = 'wahaha'
$(a).replaceAll('p')
$('p').replaceWith(a)

标签的属性操作

通用属性

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属性
如果一个标签只有true和false两种情况,适合用prop处理
$(':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')

value值的操作

$(input).val()
$(':text').val('值')
$(':password').val('值')

对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 : 
	$(':radio').val([1])
	$(':radio').val([1,2,3])

css样式

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

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

滚动条

scrollTop()
scrollLeft()

$(window).scrollLeft()
$(window).scrollTop()

盒子模型

内容宽高 : width和height

内容+padding : innerWidth和innerHeight

内容+padding+border :outerWidth和outerHeight

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

设置值:变得永远是content的值

表单操作

$(':submit').click(
    function () {
        return false
    }
)
如果返回false不提交
如果返回true不提交

内容回顾

标签的文本操作

jq对象.text('想添加的内容')
jq对象.html('<a></a>')   # 参数可以是dom对象或者jq对象

标签的操作

增

父子关系:父节点添加子节点
父节点.append(子节点)
子节点.appendTo(父节点)
父节点.prepend(子节点)
子节点.prependTo(父节点)

兄弟关系:加到之前或者之后
哥哥.after('要添加的弟弟节点') 
$('要添加的弟弟节点').insertAfter(哥哥)
弟弟.before('要添加的哥哥节点')
$('要添加的哥哥节点').insertBefore(弟弟)

删

remove : 删除所有,返回被删除的标签,标签原本的事件被清除
detach : 删除标签,返回被删除的标签保留事件
empty  : 清空标签的内容\子元素

改

要被改的.replaceWith(新)
新的.replaceAll(旧的)

克隆

clone()   不拷贝事件
clone(true) 拷贝事件

标签的属性操作

通用属性

attr
	attr('属性名') 获取属性值
	attr('属性名','属性值') 设置一个属性
	attr({'属性名':'属性值'....}) 设置多个属性
removeAttr
	removeAttr('属性名') 删除某个属性
prop
	针对true/false两种值的
	checkbox redio

css

dom.style.color = 'red';
$(obj).css('color','red')
$(obj).css({'color':'red',....})

类操作

addClass('box c1')
removeClass('box')
toggleClass('box')

val

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

盒子样式

width \ height   内容宽高
innerWidth \ innerHeight  内容+padding宽高
outerWidth \ outerHeight  内容+padding+border宽高
outerWidth(true) \ outerHeight(true) 包括margin宽高

滚动条

scrollTop   垂直滚动条距离顶部的距离
scrollLeft  水平滚动条距离左侧的距离

表单

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

动画

show系列
	show hide toggle
slide滑动系列
   slideUp slideDown slideToggle(时间,回调函数)
fade淡入淡出系列
   fadeOut fadeIn fadeToggle
动画的停止
   stop 永远在动画开始之前,停止动画

事件

事件绑定

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

各种事件

click(function(){...})   // 单机事件

blur(function(){...})    // 失去焦点
focus(function(){...})   // 获得焦点

change(function(){...})  // input框鼠标离开时内容改变触发

keyup(function(){...})   // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.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>

事件委托

$('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不许点')
    })
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件

页面的加载

document.onload = function(){
   //js 代码 
}
window.onload = function () {
            $('button').click(function () {
            alert('不许点')
            })
}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次

//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
     function () {
       //文档加在完毕之后能做的事情 
})

//jquery的方式(简写)*****
$(function () {
	//文档加在完毕之后能做的事情        
  })

//示例
$(function () {
     $('button').click(function () {
          alert('不许点')
     })
})

//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
      function () {
           alert('123')
})