目录
基本使用
-
入口函数
// 入口函数 // 文档 准备好 执行函数 $(document).ready(function(){ $('div').hide() }) -
DOM 对象 和 JQuery 对象的区别
jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法
<script> // DOM对象 使用原生 js 获取过来的对象就是 DOM对象 var div = document.querySelector('div') // jQuery对象 用 jQuery 方式获取过来的对象 本质：通过 $ 把 DOM 元素进行了包装 $('span') // jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法 $('span').hide() div.style.display = 'none' </script> -
DOM 对象 和 JQuery 对象互转
<script> // DOM 对象转化为 jQuery 对象 // $(DOM 对象) var myvideo = document.querySelector('video') // $(myvideo)[0].play() // jQuery 对象转化为 DOM 对象 // jQuery 对象 [index] // jQuery 对象.get(index) $('video')[0].play() // $('video').get(0).play() </script> -
隐私迭代
<script> // 隐私迭代 把匹配的所有元素内部进行遍历循环 给每一个元素都进行一样的操作 $('div').css('background-color', 'pink') </script>
选择器
-
筛选选择器
<script> $(function(){ // 将 ul 里的第一个小 li的颜色设置为红色 $('ul li:first').css('color','red') // 将 ul 里索引为 2 的小 li 的颜色设置为蓝色 $('ul li:eq(2)').css('color','blue') // ol 里奇数 li 设置颜色 $('ol li:odd').css('color','skyblue') // ol li偶数 li 设置颜色 $('ol li:even').css('color','pink') }) </script> -
筛选方法 上
父 parent() 子 children()
<script> // 方法都要小括号() $(function () { // 父 parent() 返回的是 最近一级的父级元素 console.log($('.son').parent()) // 子 children() 子代选择器 类似 ul>li console.log($('.grandpa').children()) // 选择里面所有的孩子 find() 类似 ul li console.log($('.grandpa').find('.father')) }) </script> -
筛选方法 下
<script> $(function () { // 兄弟元素 silbings 除了自身其他所有的亲兄弟 $('ol .item').siblings('li').css('color', 'red') // 第 n 个元素 // （1）利用选择器的方式选择 $('ul li:eq(2)').css('color', 'red') // （2）利用选择方法 $('ul li').eq(3).css('color', 'pink') // 判断是否有这个元素 有返回 true 没有返回 false console.log($('div:first').hasClass('current')); console.log($('div:last').hasClass('current')); }) </script>
操作样式
-
css() 方法
<script> $(function () { // css 只有一个参数时 返回值 不修改 console.log($('div').css('width')); // $('div').css('width','300px') // 属性名必须加引号 值为数字可以不加引号和单位 // $('div').css('width',300) // 对象方式修改多个样式 $('div').css({ width: 400, height: 400, // 符合属性使用小驼峰命名 不是数字加引号 backgroundColor: 'red' }) }) </script> -
类操作
添加类 addClass() 删除类 removeClass() 切换类 toggleClass()
<script> $(function(){ // 添加类 addClass() // $('div').click(function(){ // $(this).addClass('current') // }) // 删除类 removeClass() $('div').click(function(){ $(this).removeClass('re') }) // 切换类 toggleClass() $('div').click(function(){ // 有这个类名就清除，没有就添加 $(this).toggleClass('current') }) }) </script>
动画效果
-
显示与隐藏 show([speed],[easing],[fn])
<script> $(function(){ // show([speed],[easing],[fn]) // speed 速度 slow normal fast 或者直接输入时间 // easing 切换效果 默认 swing 可以参数 linear // fn 回调函数 $('button').eq(0).click(function(){ $('.box').show('normal') }) $('button').eq(1).click(function(){ $('.box').hide('normal') }) $('button').eq(2).click(function(){ $('.box').toggle('normal') }) }) </script> -
滑动效果
下滑动 slideDown() 上滑动 slideUp() 切换滑动 slideToggle()
<script> $(function(){ $('button').eq(0).click(function(){ // 下滑动 slideDown() $('.box').slideDown('normal') }) $('button').eq(1).click(function(){ // 上滑动 slideUp() $('.box').slideUp('normal') }) $('button').eq(2).click(function(){ // 切换滑动 slideToggle() $('.box').slideToggle('normal') }) }) </script> -
淡入淡出效果
淡入 fadeIn() 淡出 fadeOut() 淡入淡出切换 fadeToggle() 修改透明度 fadeTo()
<script> $(function(){ $('button').eq(0).click(function(){ // 淡入 fadeIn() $('div').fadeIn(1000) }) $('button').eq(1).click(function(){ // 淡出 fadeOut() $('div').fadeOut(1000) }) $('button').eq(2).click(function(){ // 淡入淡出切换 fadeToggle() $('div').fadeToggle(1000) }) $('button').eq(3).click(function(){ // 修改透明度 fadeTo() $('div').fadeTo(1000,0.6) }) }) </script> -
animate()
<script> $(function () { $('button').click(function () { $('div').animate({ left: 500, top:500, opacity: .4 }, 1000) }) }) </script>
属性操作
-
element.prop('属性名') 获取元素固有的属性值
// element.prop('属性名') 获取元素固有的属性值 console.log($('a').prop('href')) // 设置属性 $('a').prop('title','baidu') $('input').change(function() { console.log($(this).prop('checked')) }) -
元素的自定义属性通过 attr()
// 元素的自定义属性通过 attr() console.log($('div').attr('index')) $('div').attr('index','2') -
数据缓存 data() 这个里面的数据是存放在元素的内存里
$('span').data('uname', 'xiaoyaee') console.log($('span').data('uname')); // 获取 data-index h5 自定义属性 获取第一个 不用写 data- 返回数字型 console.log($('div').data('index'));
元素操作
-
获取设置元素内容 html() 获取设置元素文本内容 text() 获取设置表单值 val()
<script> $(function () { // 获取设置元素内容 html() console.log($('div').html()); // $('div').html('123') // 获取设置元素文本内容 text() console.log($('div').text()); $('div').text('123') // 获取设置表单值 val() console.log($('input').val()); $('input').val('123') }) </script> -
遍历元素
给同一类元素做不同操作 遍历 each()
<script> $(function () { // 隐式迭代 $('div').css('color', 'red') // 给同一类元素做不同操作 遍历 each() var arr = ['red', 'green', 'pink'] // $('div').each(function(index,domEle){ // // 第一个参数是索引号 // console.log(index); // // 第二个参数是 dom 元素对象 // console.log(domEle); // $(domEle).css('color',arr[index]) // }) // $.each() 方法遍历元素 主要用于遍历数据，处理数据 // $.each($('div'),function(i,ele){ // console.log(i); // console.log(ele); // }) $.each(arr, function (i, ele) { console.log(i); console.log(ele); }) $.each({ name: 'andy', age: 18 }, function (i, ele) { console.log(i); console.log(ele); }) }) </script> -
创建添加删除元素
内部添加：append() 放到内容的最后面 prepend() 放到内容的最前面
外部添加：after() 放到内容的最后面 before() 放到内容的最前面
删除元素：remove() 可以删除匹配的元素 empty() 可以删除匹配元素里的子节点 html('') 可以清空匹配元素里的子节点
<script> // 创建元素 var li = $('<li>后面添加的 li</li>') // 添加元素 // （1）内部添加 // $('ul').append(li) // 放到内容的最后面 $('ul').prepend(li) // 放到内容的最前面 // （2）外部添加 var div = $('<div>后面添加的 div</div>') // $('div').after(div) // 放到内容的最后面 $('div').before(div) // 放到内容的最前面 // 删除元素 // $('ul').remove() // 可以删除匹配的元素 自杀 // $('ul').empty() // 可以删除匹配元素里的子节点 $('ul').html('') // 可以清空匹配元素里的子节点 </script> -
元素大小
width() 获取元素的 width innerWidth() 获取元素的 width+padding
outerWidth() 获取元素的 width+padding+border outerWidth(true) 获取元素的 width+padding+border+margin
<script> $(function () { // width() 获取元素的 width console.log($('div').width()); $('div').width(300) // innerWidth() 获取元素的 width+padding console.log($('div').innerWidth()); // outerWidth() 获取元素的 width+padding+border console.log($('div').outerWidth()); // outerWidth(true) 获取元素的 width+padding+border+margin console.log($('div').outerWidth(true)); }) </script> -
元素位置
offset() 获取距离文档的位置（偏移）和父级没有关系
position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准 只能获取不能设置
<script> $(function () { // offset() 获取距离文档的位置（偏移）和父级没有关系 console.log($('.son').offset()); console.log($('.son').offset().top); $('.son').offset({ top: 100, left: 100 }) // position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准 // 只能获取不能设置 console.log($('.son').position()); $('.son').position({ top: 50, left: 50 }) }) </script>