JQuery完整介绍，又大又全，值得一看

JQuery介绍

一、引入方式

// 方式一：直接使用CDN(建议本地测试使用)
<script src='https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script>

// 方式二：下载到本地后使用
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

#  文档加载顺序
1、解析HTML结构
2、加载外部脚本和样式表文件
3、解析并执行脚本代码
4、DOM书构建完成
5、加载图片等外部文件
6、页面加载完毕

#  等待文档加载完毕后执行函数，有两种方式
1、$(window).onload(function(){})
	--页面加载完毕后执行
	--只能执行一个
2、$(document).ready(function(){}) = $(function(){})
	--DOM构建完毕执行
    --可以书写多个

二、基本使用

1、jQuery对象

jQuery('.box') = $('.box')  # 找到class属性中有box的标签
$('<p>')  # 创建p标签

#  可以链式调用
$('#d1').css('color','red').next().css('color','green')

#  jQueryDom和jsDom
1、Js DOM对象 ==> JQ DOM对象
	--$(js DOM对象)  # 例如 $(box)

2、JQ DOM对象 ==> JS DOM对象
	--$("选择器")[0]  # 或者$("选择器").get(0)

2、选择器

# id选择器：
$("#id")

# 标签选择器：
$("tagName")

# class选择器：
$(".className")

# 所有元素选择器：
$("*")

# 交集选择器：
$("div.c1")  // 找到类中有c1的div标签

# 并集选择器：
$("#id, .className, tagName")

# 层级选择器：x和y可以为任意选择器
$("x y");   // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y")  // 找到紧挨在x后面的同级别的y
$("x ~ y")  // x之后所有的同级别的y 


#  基本筛选器
:first   			//已选中的第一个元素
:last				//已选中的最后一个元素
:eq(index)			//已选中的第index元素
:even				//已选中的索引为偶数的元素（从0开始）
:odd				//已选中的索引为奇数的元素（从0开始）
:gt(index)			//已选中的大于index元素
:lt(index)			//已选中的小于index元素
:not(选择器)		 //过滤掉所有满足not条件的标签
:has(选择器)		 // 过滤出所有后代中满足has条件的标签

$('div:first')

#  补充
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

#  属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

$("input[type='checkbox']");  // 取到checkbox类型的input标签
$("input[type!='text']");	 // 取到类型不是text的input标签


#  表单筛选器
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

$(':text') = $('input[type="text"]')
$(':password') = $('input[type="password"]')


# 表单对象属性
:enabled
:disabled
:checked
:selected

"""特殊情况"""
$(':checked')  # 它会将checked和selected都拿到

$(':selected')  # 它不会 只拿selected

$('input:checked')  # 自己加一个限制条件


# 筛选器方法
$('#d1').next()  # 同级别下一个

$('#d1').nextAll()  # 同级后面所有

$('#d1').nextUntil('.c1')  # 同级后面，不包括自己，不包括最后一个


$('.c1').prev()  # 同级别上一个

$('.c1').prevAll() # 同级别上面所有

$('.c1').prevUntil('#d2')  # 同级前面，不包括自己，不包括最后一个，索引倒序排列


$('#d3').parent()    # 第一级父标签

$('#d3').parents()   # 所有父标签

$('#d3').parentsUntil('body')  # 所有父标签，直到body之前



$('#d2').children()  # 所有儿子标签，不包括文本
              
$('#d2').siblings()  # 同级别上下所有标签
              
                                  
$('div p') = $('div').find('p')  # find从某个区域内筛选出想要的标签 
              
              

3、标签的样式操作

#  类属性操作
#  js版本										#  jQuery版本
classList.add()									addClass()
classList.remove()								removeClass()
classList.contains()							hasClass()
classList.toggle()								toggleClass()



# css样式操作
<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色，第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法


# 位置操作
offset()  # 标签相对于浏览器窗口的位置
position()  # 相对于父标签

scrollTop()		# 当前滚动条与整个页面顶部的距离
scrollLeft()	# 当前滚动条与整个页面左侧的距离


$(window).scrollTop()  # 括号内不加参数就是获取

$(window).scrollTop(0)  # 加了参数就是设置


# 尺寸
$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674

4、标签操作之文本样式操作

/*
操作标签内部文本
js									jQuery
innerText							text()  括号内不加参数就是获取加了就是设置
innerHTML							html()
*/

# html()是获取选中标签元素中所有的内容

# html(val)设置值：设置该元素的所有内容 会替换掉 标签中原来的内容

$('ul').html('<a href="#">百度一下</a>')


text()   // 获取所有匹配元素包含的文本内容

text(val)  // 设置该所有匹配元素的文本内容

# 注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中



# 获取值操作
/*
js												jQuery
.value											.val()
*/
$('#d1').val()  # 不加参数是获取
"sasdasdsadsadad"
$('#d1').val('520快乐')  # 加参数就是设置

5、标签的属性操作

/*
js中													  jQuery
setAttribute()											attr(name,value)
getAttribute()											attr(name)
removeAttribute()										removeAttr(name)
*/


#  对于标签上有的能够看到的属性和自定义属性用attr,对于返回布尔值比如checkbox radio option是否被选中用prop
prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性

$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

6、标签的文档处理

"""
js											   jQuery					
createElement('p')								$('<p>')
appendChild()									append()

"""
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')  # 设置文本内容

$pEle.attr('id','d1')   # 增加属性

$('#d1').append($pEle) = $pEle.appendTo($('#d1'))  # 内部尾部追加

           
$('#d1').prepend($pEle) = $pEle.prependTo($('#d1')) # 内部头部插入

         
$('#d2').after($pEle) = $pEle.insertAfter($('#d1')) # 放在某个标签后面，同级别

        
$('#d1').before($pEle) = $pEle.insertBefore($('#d2'))  # 放在某个标签前面，同级别



$('#d1').remove()  # 将标签从DOM树中删除
w.fn.init [div#d1]
           
$('#d1').empty()  # 清空标签内部所有的内容
w.fn.init [div#d1]

7、事件

// 第一种
    $('#d1').click(function () {
            alert('别说话 吻我')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('借我钱买草莓 后面还你')
    })

7、1 克隆事件

<button id="d1">屠龙宝刀，点击就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  
        // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

    })
</script>

7、2 input实时监控

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

7、3 鼠标悬浮事件

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>

7、4 鼠标按键按下事件

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>

8、阻止标签后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
         return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

9、阻止事件冒泡

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

10、事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  
        // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

11、动画效果

$('#d1').hide(5000)
w.fn.init [div#d1]
           
$('#d1').show(5000)
w.fn.init [div#d1]
           
$('#d1').slideUp(5000)
w.fn.init [div#d1]
           
$('#d1').slideDown(5000)
w.fn.init [div#d1]
           
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
           
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
           
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]     

12、each方法

# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]

$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]

#  有了each之后 就无需自己写for循环了 用它更加的方便

# data()

#  能够让标签帮我们存储数据 并且用户肉眼看不见

$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"