jQuery未完成

jQuery

就是一个js库
是一个封装好的方法和函数,封装了很多预先定义好的函数在里面
jQuery就是为了快速方便的操作DOM 里面基本都是函数(方法)
加快了开发速度

优点

轻量级
跨浏览器兼容
链式编程,隐式迭代
简化了DOM操作
支持插件扩展开发
开源,免费

基本使用

官方网址: https://jquery.com/
版本
- 1x : 兼容IE678等低版本浏览器,官网不在更新
- 2x : 不兼容IE678等低版本浏览器,官网不在更新
- 3x : 不兼容IE678等低版本浏览器,官网主要更新维护的版本
1.引入jQuery文件
```
<script src="./jquery.min.js"></script>
```

定义一个 div 设置宽高

<style>
    .lmk {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>


<body>
    <div class="lmk"></div>
</body>

使用 JQuery 隐藏 div
```
<script>
   $('.lmk').hide();
</script>
```

JQuery入口函数

作用:

如果script在body上面就执行不了了

所以优先加载DOM元素,然后再加载script代码

 $(function(){
   ... // 此处是页面DOM加载完成后才会加载的
 });
-------------或--------------------------------------者----------------------------------------------------
 $(document).ready(function(){
   ... // 此处是页面DOM加载完成后才会加载的
 })

继承上面的代码

  // 等页面DOM加载完毕后再去执行js代码
  $(document).ready(function() {
      $('.lmk').hide();
  })
// 刷新页面后就隐藏了

// 第二种方式
 // 等页面DOM加载完毕后再去执行js代码
    $(function() {
        $('.lmk').hide();
    })

这个函数相当于js中的 DOMContentLoaded
不同于原生js中的load事件,load事件是等页面文档,外部js文件,css文件,图片加载完毕才执行script内部代码

jQuery顶级对象 $

$ 是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常直接使用$
也是jQuery的顶级对象,相当于原生js中的window,把元素利用$包装成jQuery对象,就可以调用jQuery的方法
例如 $('.lmk').hide();
```
// 1.$是jQuery的别称
$(function() {
    alert(11)
})

// 也可以使用 jQuery
jQuery(function() {
    alert(11)
})
```

##jQuery对象和DOM对象

用原生js获取的对象是DOM对象

// 例如
let myDiv = document.querySelector('div'); // 获取的div元素

用jQuery获取的对象是jQuer对象

// 用jQuery获取对象
$('div')  // 获取div元素

jQuery对象的本质是利用$对DOM对象包装后产生的对象(伪数组的形式存储)
jQuery对象只能使用jQuery的方法,DOM对象只能使用原生js的方法

jQuery对象和DOM对象互相转换

因为原生js比jQuery功能更多,有些功能jQuery并没有封装

DOM转jQuery

// 如果没有获取DOM对象可以直接获取jQuery对象即可
$('div') // 获取div对象
// 如果已经获取了DOM对象,直接把DOM对象用$封装即可
let my_video = document.querySelector('video'); // 获取 video对象
$(my_video) // 将DOM对象转换成 JQuery对象,但是jQuery没有video的方法

jQuery转DOM

// jQuery转DOM对象(两种方式)  jQuery是一个伪数组
    // $('div')[index]
    // $('div').get(index)

// 第一种方式
let video_one = $('video')[0] // 将video对象中的第一个对象转成DOM对象
// 第二种方式
let video_two = $('video).get(1) // 将video对象中的二个对象转成DOM对象
video_two.play(); // 设置打开浏览器自动播放视频

jQuery常用API

jQuery基础选择器

原生js获取元素方式很多,兼容性不一样,但是jQuery封装后,是获取元素统一标准

$('选择器') // 里面选择器直接写css即可,但是要加引号

名称	用法	描述
ID选择器	$(‘#id’)	获取指定的ID元素
全选选择器	$(‘*’)	匹配所有的元素
类选择器	$(‘.class’)	匹配统一类class的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’)	获取多个元素
交集选择器	$(‘li.current’)	交集元素 (对于交集选择器，可以与id和class共同使用。)

jQuery层级选择器

名称	用法	描述
子代选择器	$(‘ul>li’)	使用>号获取ul的儿子,注意:并不会获取ul的孙子层级的元素
后代选择器	$(‘ul li’)	使用空格,代表后代选择器,获取ul下所有的li元素,包括孙子元素

jQuery隐式迭代

遍历内部DOM元素,以伪数组的形式存储,就是隐式迭代

// 获取4个div元素
let lmk = $('div')
console.log(lmk);

// 给四个div设置背景颜色为粉色
lmk.css('background', 'pink')
    // 上面代码直接把4个div背景颜色设置为了粉色
    // 是因为隐式迭代(遍历内部DOM元素,以伪数组的形式存储)

// 给ul下li修改字体颜色
let kml = $('ul li')
kml.css('color', 'pink')

jQuery筛选选择器

名称	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到li元素中,选择索引号是2的元素,索引号从0开始
:odd	$(‘li:odd’)	获取到li元素中,选择索引号为奇数的元素
:even	$(‘li:even’)	获取到li元素中,选择索引号为偶数的元素

jQuery筛选方法(重点)

名称	用法	说明
parent()	$(‘li’).parent();	查找父级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’),就是获取ul的子元素,不包括孙子的元素
find(selector)	$(‘ul’).find(‘li’);	相当于$(‘ul li’),后代选择器包含孙子元素
siblings(selector)	$(‘.first’).siblings(‘li’);	查找兄弟节点,不包括自己,查找.first这个元素的兄弟节点是否有li这个元素
nextAll([expr])	$(‘.first’).nextAll();	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(‘.last’).prevAll();	查找当前元素之前的同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’);	检查当前元素是否含有某个特定的类,如果有则返回true
eq(index)	$(‘li’).eq(2);	相当于 $(‘li:eq(2)’),index从0开始

jQuery排他思想

html代码

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

js代码

 $(function() {
    // 1. 隐式迭代 给所有的按钮都绑定了点击事件
    $('button').click(function() {
        // 2.当前的元素变换颜色
        $(this).css('background', 'pink')

        // 3.其余的元素去掉背景颜色  也就是当前元素的兄弟们都去掉背景颜色
        $(this).siblings('button').css('background', '')

    })
})

jQuery样式操作

jQuery可以使用css方法来修改简单的样式,也可以操作类,修改多个样式

// 参数只写属性名,则返回属性值
$(this).css('color'); // 返回当前元素的属性值

// 参数写 属性名,属性值 则是设置一组样式,属性必须加引号,如果是数字可以不用加单位和引号
$(this).css('color','red'); // 设置当前元素字体颜色为红色

// 参数可以是对象的形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({'color':'red',
             'font-size':20
           })
 // 如果是复合属性则必须使用驼峰命名法

通过类操作css(预先写好一个类,然后通过jQuery调用)

// 添加类
$('div').addClass('current'); // 将 current这个类添加给div(类名不用加.)\

// 删除类
$('div').removeClass('current'); 将 current这个类从div中删除

// 切换类
$('div').toggleClass('current'); 将 div元素中的类名改为current,如果没有类名就设置为current

jQuery类操作和原生JS中的className的区别

原生js中的className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作,不影响原先的类名

jQuery效果

常见效果

显示隐藏	滑动效果	淡入淡出	自定义动画
show() 显示	slideDown() 下滑	fadeln() 淡入	animate()
hide() 隐藏	slideUp() 上滑	fadeOut() 淡出
toggle() 切换	slideToggle() 切换	fadeToggle() 切换
		fadeTo() 修改透明度

jQuery效果-显示/隐藏

用法: show([speed],[easing],[fn])
用法: hide([speed],[easing],[fn])
用法: toggle([speed],[easing],[fn]) toggle 例如第一次点击时显示,那么再点击一次就是隐藏了
参数可以都省略(无动画显示)

效果参数:
speed: 速度('slow','normal','fast')三种预定义字符串 或者动画的时长毫秒数

easing: 用来指定切换效果,默认是 swing 可用参数 linear(匀速)

fn: 回调函数,在动画完成时执行函数,每个元素执行一次

jQuery效果-滑动

用法: slideDown([speed],[easing],[fn])
用法: slideUp([speed],[easing],[fn])
用法: slideToggle([speed],[easing],[fn])

参数可以都省略(无动画显示)

效果参数:
speed: 速度('slow','normal','fast')三种预定义字符串 或者动画的时长毫秒数

easing: 用来指定切换效果,默认是 swing 可用参数 linear(匀速)

fn: 回调函数,在动画完成时执行函数,每个元素执行一次

jQuery鼠标切换事件-hover()

hover([over],out) 括号中参数是函数
第一个 over 和 第二个out都是函数
例:
  $('div').hover(function(){
    //鼠标经过时运行
  },function(){
    // 鼠标离开时运行
  })

//如果hover()中只写一个函数,那么鼠标经过和离开都会触发这个函数中的代码

动画队列以及停止排队的方法

动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队进行

停止排队

// stop() 
stop()方法用于停止动画或者效果
注意: 
  stop()写到动画或者效果的前面,相当于停止上一次的动画 
  如果stop()写到了执行动画函数的后面,就相当于直接把动画停住了
例:
  // 通过hover()来触发鼠标经过和鼠标离开事件
  $('.lmk>li').hover(function() {
    // 先使用stop()停止上一次的动画,在使用slideToggle()方法切换上拉下拉菜单
    $(this).children('ul').stop().slideToggle(100);
  })

jQuery效果-淡入淡出

用法: fadeln([speed],[easing],[fn])
用法: fadeOut([speed],[easing],[fn])
用法: fadeToggle([speed],[easing],[fn])
参数可以都省略(无动画显示)

效果参数:
speed: 速度('slow','normal','fast')三种预定义字符串 或者动画的时长毫秒数

easing: 用来指定切换效果,默认是 swing 可用参数 linear(匀速)

fn: 回调函数,在动画完成时执行函数,每个元素执行一次

前三个和之前的一样


// 渐进的方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
 // 速度 和 透明度 必须写

效果参数:
opacity 透明度 必须写 取值为 0到1之间

speed: 速度('slow','normal','fast')三种预定义字符串 或者动画的时长毫秒数

easing: 用来指定切换效果,默认是 swing 可用参数 linear(匀速)

fn: 回调函数,在动画完成时执行函数,每个元素执行一次

jQuery效果-自定义动画

用法: animate(params,[speed],[easing],[fn])

效果参数:
 params:想要更改的样式属性,以对象的形式传递, 必须写, 属性名可以不带引号,如果是复合属性需要采取驼峰命名法,其余参数可以省略

 speed: 速度('slow','normal','fast')三种预定义字符串 或者动画的时长毫秒数

 easing: 用来指定切换效果,默认是 swing 可用参数 linear(匀速)

 fn: 回调函数,在动画完成时执行函数,每个元素执行一次

html代码

<style>
    div {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<body>
  <button>动起来</button>
  <div></div>
 </body>

js代码

 $(function() {
    $('button').click(function() {
        $('div').animate({ // 第一个参数以对象的形式传输
            left: 200, // 向右移动200px
            top: 300,  // 向下移动300px
            opacity: .4, // 透明度变为 0.4
            width: 500 // 宽度变为 500px
        }, 500) // 500是第二个参数
    })
})

jQuery属性操作

获取元素的固有属性-prop()

所谓的元素固有属性就是元素本身自带的属性比如 a元素里的href 或者 input元素的type

html代码

<a href="https://blog.kkdaly.top" title="很好">啦啦啦</a>

js代码

$(function() {
    // element.prop('属性名')
    let a = $('a').prop('href'); // 获取a标签的属性名
    console.log(a); // 打印属性名
})

// 打印结果    http://blog.kkdaly.top/

设置元素的固有属性-prop()

html代码

<a href="https://blog.kkdaly.top" title="很好">啦啦啦</a>

js代码

$(function() {
    // prop('属性','属性值')
    $('a').prop('title', '啦啦啦') // 将 a标签的title改为了啦啦啦(原来是很好)
})

固有元素属性举例

html代码

<body>
    <input type="checkbox" checked>
</body>

js代码

$(function() {
    $('input').change(function() {
        // change 和 click 不同的是
        // Click事件是选择列表项， 而Change事件则是编辑内容， 
        //这两个事件的结果都是使ComboBox控件中的现实内容发生变化， 
        //但是一个是通过鼠标点击， 即Click； 另一个是通过在输入框中编辑内容， 即Change。
        console.log($(this).prop('checked')); //返回true/false
    })
})

设置和获取元素自定义属性-attr()

html代码

<body>
    <div index='1'></div>
</body>

js代码

<script>
    $(function() {
        console.log($('div').prop('index')); // 返回 undefined
        console.log($('div').attr('index')); // 返回 1   类似于原生js的getAttribute()

        $('div').attr('index', '4'); // 修改自定义属性为4  类似于原生js的setAttribute()
    })
</script>

数据缓存-data()

data()方法可以在指标的元素生存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除

$(function() {
    $('span').data('name', 'andy')   // 将name这个属性设置为andy,但是页面中的span是没有改属性的
    // 相当于把这个属性存到了内存中,虽然页面中没有属性,但是可以通过data()来调用name属性的值
    console.log($('span').data('name'));  // 调用name属性的值
    
    // data()方法获取data-index这个h5自定义属性时可以不用写前面的data- 而且返回的是数字型
    console.log($('div').data('index')) // 实际是获取了 data-index这个属性的值
}

:checked 选择器和 change事件

:checked作用是判断复选框是否为选中状态

change事件是表单的编辑内容用来对表单进行作用

$(function() {
    // 全部选中功能  把全选按钮的状态赋值给三个小的按钮
    // 事件可以使用change
    $('.checkall').change(function() {
        $('.check-one,.checkall').prop('checked', $(this).prop('checked'))
    })

    // 选中功能 当我们每次点击小的复选框按钮,就来判断
    // 如果小复选框被选中的个数等于3,就应该把全选按钮选上,否则全选按钮不选

    // jQuery 提供了一个选择器 :checked选择器 (查找被选中的表单元素)
    $('.check-one').change(function() {
        if ($('.check-one:checked').length === $('.check-one').length) { // 通过 checked判断复选框的按钮是否被选中
            $('.checkall').prop('checked', true) // 如果 都被选中就把全选的复选框也选上按钮
        } else {
            $('.checkall').prop('checked', false) // 如果没有全选就取消全选按钮的选中状态
        }
    })


})

jQuery内容文本操作

主要针对元素的内容还有表单的值操作

普通元素内容 html()-相当于原生innerHTML

html() //获取元素的内容
html('内容') // 设置元素的内容

普通元素文本内容 text()-相当于innerText

text() //获取元素的内容
text('内容') // 设置元素的内容

表单元素内容 val()-相当于原生value

val() //获取元素的内容
val('内容') // 设置元素的内容

jQuery元素操作

遍历,创建,添加,删除元素操作

遍历元素

jQuery中的隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同的操作,就需要用到遍历

遍历元素-each()

// 语法:
// $('元素').each(function(index,domEle){
    // 代码块
// })
// each()方法遍历每一个元素,主要用DOM处理元素
// 参数:
// index: 每个元素的索引号;
// demEle: 每个DOM元素对象,不是jQuery对象

html代码
```
<div>1</div>
<div>2</div>
<div>3</div>
```

js代码

$(function() {
    // 对同一类元素做不同的操作,需要遍历元素,(类似for,但是比for强大)
    $('div').css('color', 'red'); // 将三个div字体颜色设置为红色
    // 1.each()方法遍历元素
    // 将三个div设置不同的颜色
    let sum = 0; // 设置一个值,用于保存和
    let arr = ['red', 'green', 'blue'] // 声明一个数组
    $('div').each(function(index, domEle) {
        console.log(index); // 返回的是元素的索引号 0 1 2
        console.log(domEle); // 返回的是DOM元素对象
        $(domEle).css('color', arr[index]) // 将每个div设置不同的颜色
        sum += parseInt($(domEle).text()) // 将div的值相加
        console.log(sum); // 返回 6 将上面div的值相加了
    })
})

遍历元素-$.each()

$.each(ojbect,function(index,element){
 // 代码块
})
// $.each()方法可以用于遍历任何对象,主要用于数据处理,比如数组,对象
// 参数:
// index: 每个元素的索引号
// element: 遍历内容

html代码
```
<div>1</div>
<div>2</div>
<div>3</div>
```

js代码

$(function() {
    let arr = ['red', 'green', 'blue'] // 声明一个数组

    $.each($('div'), function(index, element) {
        console.log(index); // 返回的是元素的索引号 0 1 2
        console.log(element); // 返回的是DOM元素对象
    })
    // 还可以处理数组和对象
    $.each(arr, function(index, element) {
        console.log(index); // 返回数组的索引号
        console.log(element); // 返回数组的值
    })
})

创建元素-$(‘元素’);

// 创建语法:
// $('<li></li>')

// 添加语法:
// element.append('内容') // 内部添加 将元素放到元素的最后面 类似于原生的appendChild
// element.prepend('内容') // 内部添加 将元素放到元素的最前面

// element.after('内容') // 外部添加  将元素放到目标元素的后面
// element.before('内容')  // 外部添加 将元素放到目标元素的前面

// 内部添加,生成后是父子关系
// 外部添加,生成后是兄弟关系

举例:

    <ul>
        <li>原来的li</li>
    </ul>
    <div>原来的div</div>
// ------------------------------------------
<script>
    // 1.创建元素
    var li = $('<li>我被创建出来了</li>');
    // 2.添加元素

    // 内部添加  
    $('ul').append(li); // 放到内容的最后面
    $('ul').prepend(li); // 放到内容的最前面

    // 外部添加
    var div = $('<div>我又被创建出来了</div>')
    $('div').after(div) // 将div放到div元素的后面
    $('div').before(div) // 将div放到div元素的前面  
</script>

删除元素

// element.remove() // 删除匹配元素本身
// element.empty()  // 删除匹配元素中的所有子节点
// element.html(''')  // 清空匹配元素的内容

举例:

// 3.删除元素
$('ul').remove() // 删除匹配元素本身
$('ul').empty() // 删除元素的子元素
$('ul').html('') // 将匹配元素的内容清空

jQuery尺寸,位置操作

语法	用法
width()/height()	获取匹配元素宽度和高度值,只算wdith 和 height
innerWidth()/innerHeight()	获取匹配元素宽度和高度值,包含padding
outerWidth()/outerHeight()	获取匹配元素宽度和高度值,包含padding,border
outerWidth(true)/outerHeight(true)	获取匹配元素宽度和高度,包含padding,border,margin

如果以上参数为空,则是获取相应的值,返回的是数字型
如果参数为数字,则是修改为相应的值
参数可以不写单位

语法	用法	属性
offset()	设置或者返回元素的相对于DOM文档的偏移坐标,和父级没有关系(修改的话需要在括号里传一个字典(类))	left,top 获取距离
position()	获取带有定位的父级偏移坐标,如果父级没有定位,就以DOM文档为准(只能获取不能设置)	left,top 获取距离
scrollTop()	设置或者获取元素被卷去的头部
scrollLeft()	设置或者获取元素被卷去的左侧

offset() 和 position()

$(function() {
    // 1.获取设置距离文档位置坐标 offset
    console.log($('.kml').offset());
    // 获取元素距离文档位置的位置
    console.log($('.kml').offset().top); // 108

    // 修改坐标
    $('.kml').offset({
        top: 200,
        left: 200
    })

    // 2.获取获取带有定位的父级偏移坐标
    console.log($('.kml').position());

})

scrollTop() 和 scrollLeft()

$(function() {

    // 获取 元素距离页面顶部的坐标
    let boxTop = $('.kml').offset().top;

    $(window).scroll(function() { // 设置页面滚动事件
        console.log($(document).scrollTop()); //获取元素被卷去头部的坐标
        // 判断当页面滚动到元素距离页面的坐标时
        if ($(document).scrollTop() >= boxTop) {
            // 将隐藏的元素显示
            $('.lmk').fadeIn() // 淡入
        } else {
            // 反之就隐藏
            $('.lmk').fadeOut() // 淡出
        }

    })
    
    // 点击返回顶部功能
    $('.lmk').click(function() {
        // 点击返回顶部
        // $(document).scrollTop(0)

        // 可以用 animate动画函数设置返回顶部
        // 里面有scrollTop属性,可以设置位置
        // 因为是元素做动画 所以要将document修改为 $('body,html').animate({scrollTop:0})
        $('body,html').animate({
            scrollTop: 0
        })
    })       
})

jQuery事件

jQuery事件注册

// 语法:
// element.事件(function(){
    // 代码块
})

jQuery事件处理-on()

该方法在匹配元素上绑定一个或多个事件的事件处理函数
可以实现事件的委派操作,例如就是把原来加给子元素身上的事件绑定到父元素身上,就是把事件委派给父元素
可以动态创建元素,click()没有办法绑定动态创建元素的事件,on()可以给动态生成的元素绑定事件

// 语法
// element.on(events,[selector],fn)

// events: 一个或多个用空格分隔的事件类型 比如click 或 keydown 
// selector: 元素的子元素选择器
// fn : 回调函数

html代码

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .current{
        background-color: red;
    }
</style>

<body>
    <div></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ol></ol>    
</body>

使用

// 注册多个事件    如果每个事件所做的事情都是不相同的话 需要将 事件:function(){} 以这种对象的形式传输,就可以实现不同的功能了
$('div').on({
    mouseenter: function() {
        $(this).css('background', 'skyblue') // 鼠标经过变成蓝色
    },
    click: function() {
        $(this).css('background', 'purple') // 鼠标点击变成紫色
    },
    mouseleave: function() {
        $(this).css('background', 'orange') // 鼠标离开变成橙色
    }
});

使用2 (如果事件处理程序是相同的情况)

// 如果 注册的事件要实现的功能相同的话 可以以字符串的形式传递, 然后在传递一个函数,这样就可以减少代码量了
$('div').on("mouseenter mouseleave", function() {
    $(this).toggleClass('current'); // 为div 添加或者删除这个类 (切换)
})

使用3 (做事件委派)

// on 做事件委派
$('ul').on('click', 'li', function() {
    console.log($(this).html()); // click 是绑定到ul身上的,但是触发的对象是ul里面的li
})

使用4 (给动态元素创建事件)

// on 给动态元素创建事件   
// 正常情况下用click() 没办法给新的动态li创建事件 on()可以
$('ol').on('click', 'li', function() {
    console.log(1); // 可以弹出1
})
var li = '<li>我是动态创建的li</li>'
$('ol').append(li)

事件处理-off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

// 语法:
// $('element').off('要解除的事件(不写全解除)'); //直接给添加事件处理的元素添加off()方法即可
// $('element').off('要解除的事件','子元素')  // 用于解除事件委托

如果事件只想触发一次,可以用one()来绑定事件
```
// one() 只能触发一次事件 和on()的写法一样
```

自动触发事件-trigger()

该函数会自动触发,比如轮播图自动播放等

// 语法:
// 1. element.事件()  // 直接 这样写 可以自动触发
// 2. element.trigger('事件') // 第二种自动触发事件
// 3. element.triggerHandler('事件') // 第三种自动触发事件  (不会触发元素的默认行为)

jQuery事件对象

只要有事件被触发就会有事件对象产生

// 语法
// element.on(events,function(event){})
 
// events: 一个或多个用空格分隔的事件类型 比如click 或 keydown 
// event: 就是事件对象

// 可以用事件对象来阻止默认行为和冒泡
阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()

阻止事件冒泡

$(function() {
    $(document).on('click', function(e) {

        console.log('点击了dom');
    })
    $('div').on('click', function(e) {

        console.log('点击了div');
        e.stopPropagation() // 阻止事件冒泡到dom
    })
})

jQuery其他方法

jQuery拷贝对象

// 语法: $.extend([deep],target,object1,[objectN])
// 1.deep: 如果设为true为深拷贝,默认为false 浅拷贝
// target: 使用拷贝的对象
// object1: (真正要拷贝的对象)
// objectN: 拷贝的多个对象

使用

$(function() {
    var tarobj = {  // 定义一个对象
        id: 0
    };
    var obj = {     // 定义一个对象
        id: 1,
        name: 'andy',
        va: {
            id: 2
        }
    }

    // $extend(target,obj)
    $.extend(tarobj, obj);  // 将 obj 拷贝到 tarobj
    console.log(tarobj); // 已经拷贝过去了 会覆盖原来对象的数据
})

jQuery多库共存

jQuery使用$符号作为标识符,其他js库也会用$作为标识符,会引起冲突

解决方法

$(function() {

    // 封装 函数
    function $(ele) {

        return document.querySelector(ele);
    }
    console.log($('div'));
    // 现在自己封装的函数和jQuery冲突了


    // 解决方案 可以把$ 符号改为 jQuery 比如 jQuery('div')
    jQuery('div').each(function(i, ele) {
        console.log(ele);
    })

    // 解决方案2 可以改jQuery变量规定新的名称: $.noConflict()
    var suibian = jQuery.noConflict(); // 或者 $.noConflict()
    console.log(suibian('div')) // 获取到了div元素

})

jQuery插件

jQuery功能有限,想要更复杂的效果,可以借助于jQuery插件完成
插件库

名称	网址
插件库	http://www.jq22.com/
jQuery之家	http://www.htmleaf.com/

全屏滚动特效插件

名称	网址
中文	http://www.dowebok.com/demo/2014/77/
github	https://github.com/alvarotrigo/fullPage.js

javascript

jQuery

本博客所有文章是以学习为目的，如果有不对的地方可以一起交流沟通共同学习邮箱:1248287831@qq.com！

nginx负载均衡and健康检查上一篇

es6-生成器下一篇

jQuery未完成

jQuery

优点

基本使用

JQuery入口函数

jQuery顶级对象 $

jQuery对象和DOM对象互相转换

jQuery常用API

jQuery基础选择器

jQuery层级选择器

jQuery隐式迭代

jQuery筛选选择器

jQuery筛选方法(重点)

jQuery排他思想

jQuery样式操作

jQuery类操作和原生JS中的className的区别

jQuery效果

jQuery效果-显示/隐藏

jQuery效果-滑动

jQuery鼠标切换事件-hover()

动画队列以及停止排队的方法

jQuery效果-淡入淡出

jQuery效果-自定义动画

jQuery属性操作

获取元素的固有属性-prop()

设置元素的固有属性-prop()

固有元素属性举例

设置和获取元素自定义属性-attr()

数据缓存-data()

:checked 选择器 和 change事件

jQuery内容文本操作

普通元素内容 html()-相当于原生innerHTML

普通元素文本内容 text()-相当于innerText

表单元素内容 val()-相当于原生value

jQuery元素操作

遍历元素

遍历元素-each()

遍历元素-$.each()

创建元素-$(‘元素’);

删除元素

jQuery尺寸,位置操作

jQuery事件

jQuery事件注册

jQuery事件处理-on()

事件处理-off()解绑事件

自动触发事件-trigger()

jQuery事件对象

jQuery其他方法

jQuery拷贝对象

jQuery多库共存

jQuery插件

:checked 选择器和 change事件