目录
普通元素内容 html()( 相当于原生inner HTML)
普通元素文本内容 text() (相当与原生 innerText)
jQuery 的基本使用
入口函数
等着dom加载完毕后执行内部代码,不必等着内部代码加载完成
相当于js中的DOMContentLoaded
不同于js中的load事件是等页面文档js css文件加载完毕后才执行
$(function () {
/* 等页面加载完毕后执行内部代码 */
console.log("#box");
})
$(document).ready(function () {
console.log("#box");
})
顶级对象
$是jquery的别称
$是jquery的顶级对象,相当于原生js中的window,把元素利用$包装成jquery对象就可以调用方法
jquery对象和dom对象
- 用原生js获取过来的对象是dom对象
- jquer获取过来的是jquery对象
- jquery对象利用$对dom对象包装后产生的对象(伪数组的形式存储)
- jjquery对象只能使用jquery的方法dom对象使用原生js的方法
相互转换
console.log($('#box'));
var box = document.getElementById('#box')
// dom转jquery对象
$(box)
// jQuery对象转dom对象
$('#box')[0]
$('#box').get(0)
jQuery 选择器
1 jQuery 选择器
2 隐式迭代(重要)
$('div').css('属性', '值')
3.jQuery 筛选选择器
4 Query 筛选方法(重点)
jQuery 里面的排他思想
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
$(function () {
// 隐式迭代
$('button').click(function () {
// 当前元素添加颜色
$(this).css('background', 'pink')
// 隐式迭代获取其余兄弟元素去掉颜色
$(this).siblings('button').css('background', '')
})
})
</script>
链式编程
$(this).css('color', 'red').sibling().css('color', '');
jQuery 样式操作
操作 css 方法
1. 参数只写属性名,则是返回属性值
$(this).css(''color'');
$(this).css(''color'', ''red'')
$(this).css({ "color":"white","font-size":"20px"});
设置类样式方法
1. 添加类
$(“div”).addClass(''current'')
$(“div”).removeClass(''current'');
$(“div”).toggleClass(''current'')
类操作与className区别
<style>
.one {
width: 350px;
height: 350px;
background-color: green;
border-radius: 50%;
}
.font {
font-size: 50px;
line-height: 350px;
text-align: center;
}
</style>
<body>
<div id="box" class="one">11111</div>
</body>
<script>
// let box = document.getElementById('box')
// 覆盖类名
// box.className = 'font'
$('#box').addClass('font') //追加类名不影响有的
jQuery 效果
显示隐藏效果
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
- 参数都可以省略, 无动画直接显示。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
div {
width: 150px;
height: 350px;
background-color: green;
}
</style>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
<script>
$(function () {
$('button').eq(1).click(function () {
$('div').hide(1000, function () {
console.log(('隐藏'));
})
})
$('button').eq(0).click(function () {
$('div').show(1000, function () {
console.log(('显示'));
})
})
$('button').eq(2).click(function () {
$('div').toggle(1000, function () {
console.log(('切换'));
})
})
})
</script>
滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
- 参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
事件切换
hover([over,]out)
- over:鼠标移到元素上要触发的函数(相当于mouseenter)
- out:鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
// $(function () {
// $('button').eq(0).click(function () {
// $('div').slideDown()
// })
// $('button').eq(1).click(function () {
// $('div').slideUp(500)
// })
// $('button').eq(2).click(function () {
// $('div').slideToggle(500)
// })
// })
// $(function () {
// // 鼠标经过
// $('button').mouseover(function () {
// $('div').slideDown()
// })
// // 鼠标离开
// $('button').mouseout(function () {
// $('div').slideUp()
// })
// })
// ---------事件切换hover复合写法
// $(function () {
// $('button').hover(function () {
// // 鼠标经过
// $('div').slideDown()
// }, function () {
// // 鼠标离开
// $('div').slideUp()
// })
// })
// --------鼠标经过离开都会触发
$(function () {
$('button').hover(function () {
$('div').slideToggle(500)
})
})
动画队列及其停止排队方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
stop() 方法用于停止动画或效果。
淡入淡出效果
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
- 参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
- opacity 透明度必须写,取值 0~1 之间。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
自定义动画 animate
animate(params,[speed],[easing],[fn])
- params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
- easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
jQuery 属性操作
设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type
获取属性语法
prop(''属性'')
prop(''属性'', ''属性值'')
设置或获取元素自定义属性值 attr()
数据缓存 data()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。
<body>
<a href="http://www.baidu.com" title="">百度</a>
<div index="1" data-index="5">div</div>
<span>123</span>
</body>
<script>
$(function () {
// 设置或获取元素固有属性值 prop()
console.log($('a').prop('href'));
$('a').prop('title', '挺好')
// 设置或获取元素自定义属性值 attr()
console.log($('div').attr('index'));
$('div').attr('index', 4);
console.log($('div').attr('data-index'));
// 数据缓存 data()
$('span').data('uname', 'anly')
console.log($('span').data('uname'));
// 这个方法获取h5自定义属性 不用写data- 返回的是数字
console.log($('div').data('index'));
})
jQuery 内容文本值
普通元素内容 html()( 相当于原生inner HTML)
html() // 获取元素的内容html(''内容'') // 设置元素的内容
普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容text(''文本内容'') // 设置元素的文本内容
表单的值 val()( 相当于原生value)
val() // 获取表单的值val(''内容'') // 设置表单的值
jQuery 元素操作
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
$.each(object , function (index, element) { xxx; } )
$("div").each(function (index, domEle) { xxx; } )
- 1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
- 3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
$(function () {
// each方法遍历元素
var sum = 0
var arr = ['red', 'green', 'blue']
$('div').each(function (i, dom) {
// console.log(i); 索引
// console.log(dom); dom元素对象
$(dom).css('background', arr[i])
sum += parseInt($(dom).text())
})
console.log(sum);
// $.each 处理数据
$.each(arr, function (i, ele) {
// console.log((i));索引
// console.log(ele);值
})
$.each({ name: 'anly', age: 18 }, function (i, ele) {
console.log((i)); //属性名
console.log(ele);// 属性值
})
})
创建元素
$(''<li></li>'');
添加元素
内部添加
element.append(''内容'') //把内容放入匹配元素内部最后面,类似原生 appendChild
element.prepend(''内容'') //把内容放入匹配元素内部最前面。
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
jQuery 尺寸、位置操作
jQuery 尺寸
- 以上参数为空,则是获取相应值,返回的是数字型。
- 如果参数为数字,则是修改相应值。
- 参数可以不必写单位。
jQuery 位置
- ① offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
- ② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- ③ 可以设置元素的偏移:offset({ top: 10, left: 30 });
- ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
- ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定
- 位父级左侧的距离。
- ③ 该方法只能获取
- ① scrollTop() 方法设置或返回被选元素被卷去的头部。
- ② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
jQuery 事件
jQuery 事件注册
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
jQuery 事件处理
事件处理 on() 绑定事件
element.on(events,[selector],fn)
- 1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
- 2. selector: 元素的子元素选择器 。
- 3. fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1
可以绑定多个事件,多个处理事件处理程序
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
})
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});
on() 方法优势2
$('ul').on('click', 'li', function() {
alert('hello world!');
});
on() 方法优势3:
$("div").append($("<p>我是动态创建的p</p>"));
$(“div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
事件处理 off() 解绑事件
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击
jQuery 事件对象
事件被触发,就会有事件对象的产生。
element.on(events,[selector],function(event) {})
- 阻止默认行为:event.preventDefault() 或者 return false
- 阻止冒泡: event.stopPropagation()
jQuery 对象拷贝
如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用 $.extend() 方法
$.extend([deep], target, object1, [objectN])
- 1. deep: 如果设为true 为深拷贝, 默认为false 浅拷贝
- 2. target: 要拷贝的目标对象
- 3. object1:待拷贝到第一个对象的对象。
- 4. objectN:待拷贝到第N个对象的对象。
- 5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
- 6. 深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象
jQuery 多库共存
Query使用$作为标示符,随着jQuery的流行,其他 js 库也会用这$作为标识符, 这样一起使用会引起冲突。
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。
jQuery 插件
- 1. jQuery 插件库 http://www.jq22.com/
- 2. jQuery 之家 http://www.htmleaf.com/
- 1. 引入相关文件。(jQuery 文件 和 插件文件)
- 2. 复制相关html、css、js (调用插件)。