1. 节点操作
(1)创建和添加节点
<script type="text/javascript">
$(function() {
// 创建jQuery对象,var h1 = $('<h1>jquery</h1>');
$("div").append('<h1>jquery</h1>'); // 添加jQuery对象,参数为代码字符串
$("div").append($("p")); // p添加到div内部最后面
$("p").appendTo($("div")); // 与上面等价
$("div").prepend($("p")); // p添加到div内部最前面
$("p").prependTo($("div")); // 与上面等价
$("div").after($("p")); // p添加到div外部后面
$("div").before($("p")); // p添加到div外部前面
})
</script>
(2)清空和删除节点
<script type="text/javascript">
$(function() {
$("div").html(""); // 清空元素内容,但易内存泄漏,事件不会被清除
$("div").empty(); // 清除元素内容,事件也同样清除
$("div").remove(); // 删除元素
$(".des").clone(true).appendTo("div");
// 传参false深度复制但不复制事件;传参true深复制,复制事件
})
</script>
2. 动画
(1)显示隐藏动画:show()、hide()。
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
// $("div").show(); // 不传参数,没有动画效果
// $("div").show(1000); //动画持续时间,可以是毫秒值,也可以是固定字符串fast:200ms,normal:400ms,slow:600ms
$("div").show(1000, function() { // 回调函数,动画执行完成后执行
console.log("hahahaha");
})
});
$("input").eq(1).click(function() {
// $("div").hide();
// $("div").hide(1000);
$("div").hide(1000, function() {
console.log("hehehehe");
})
});
})
</script>
(2)滑入滑出切换动画:slideUp()、slideDown()、slideToggle()用法与上面显示隐藏动画类似。
(3)淡入淡出切换动画:fadeIn()、fadeOut()、fadeToggle()用法与上面显示隐藏动画类似。
(4)自定义动画:
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
$("#box1").animate({left:800}, 8000, "linear", function(){
console.log("hahahaha");
});
// 第一个参数:对象,需要的动画样式;第二个参数:执行时间;第三个参数:动画执行效果
// 默认动画效果swing,还可取值匀速linear等
});
})
</script>
(5)stop用法
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function() {
// $("div").stop(); // 没有参数时表示停止当前正在执行的动画,防止动画队列出错
// $("div").stop().animate(); // 常用
// 第一个参数clearQueue是否清除动画队列 true false
// 第二个参数jumpToEnd是否跳转到当前动画的最终效果 true false
$("div").stop(true, true);
});
})
</script>
3. 事件机制
(1)发展历程
简单事件绑定 | $("p").click(function(){}); $("p").mouseenter(function(){}); $("p").mouseleave(function(){}); | 不能同时注册多个事件 |
bind事件绑定 | $("p").bind("click mouseenter", function(){}); | 第一个参数事件类型,第二个参数事件处理程序,可以同时注册多个事件,但不支持动态绑定事件 |
delegate事件绑定 | $("div").delegate("p", "click", function(){}); | 给父元素注册委托事件,子元素执行,第一个参数事件最终由谁执行,第二个参数事件的类型,第三个参数函数,函数最后由子元素执行,例如为div所有的子元素p注册事件,支持动态绑定事件 |
on注册事件 | $("p").on("click", function(){}); $("div").on("click", "p", function(){}); | 第一种注册简单事件,自己触发,不支持动态绑定;第二种父元素绑定代理事件,给内部元素触发,支持动态绑定;第一个参数事件类型,第二个参数执行事件的后代元素(可选),没有后代元素则自己执行,第三个参数传递给处理函数的数据,通过event.data使用,event为函数参数,第四个参数函数 |
(2)事件解绑
$("#btn").off("click"); | 给id为btn的元素接触click事件,也可以不传参数,则是解除所有事件 |
(3)触发事件
$("#btn").click(); | 触发id为btn的元素的click事件,一般用于别的函数中调用 |
$("#btn").trigger("click"); | 触发id为btn的元素的click事件,一般用于别的函数中调用 |
(4)事件对象(event为function的参数)
event.screenX; event.screenY; | 相对于屏幕最左上角的位移值 |
event.clientX; event.clientY; | 距离页面最左上角的位置(忽视滚动条) |
event.pageX; event.pageY; | 距离页面最顶部左上角的位置(计算滚动条的距离) |
event.keyCode; | 按下的键盘代码 |
event.data; | 存储绑定事件时传递的附加数据 |
event.stopPropagation(); | 阻止事件冒泡行为,即点击子元素,不触发父元素的事件 |
event.preventDefault(); | 阻止浏览器默认行为,例如<a>标签的跳转页面 |
return false; | 既能阻止事件冒泡,又能阻止浏览器默认行为 |
4. 补充知识点
(1)链式编程:一般用于设置操作,筛选选择器会改变jQuery对象的DOM对象,例如prevAll()、nextAll(),end()用于恢复到上次的状态,返回匹配元素之前的状态。
(2)each方法:遍历jQuery对象集合,为每一个匹配的元素执行一个函数,参数一表示当前元素在所有匹配元素中的索引号,参数二表示当前元素(DOM对象)。
$("li").each(function(index, element) {
$(element).css("opacity", (index+1)/10);
})
(3)$冲突:若$需要被赋予新的定义,可用$.noConflict()释放$的控制权,默认用jQuery接收控制权;也可以用变量$$ = $.noConflict();的接收控制权,然后变量$$当做$使用。
5. 插件(jQuery文件之后引入)
(1)jquery.color.js:使jQuery动画能够实现颜色渐变。
(2)jquery.lazyload.js:在比较长的页面(滚动条)延迟加载图片,图片的src属性需修改成data-original,给图片添加lazy类,然后添加代码$(".lazy").lazyload()。
(3)jquery.ui:需同时引入jquery.ui.js和jquery.ui.css。
(4)jquery插件制作:$.prototype.pluginName = function(){};或者$.fn.pluginName = function(){};实现功能的添加,返回值return this;避免链式编程的破坏。