一、名词释义
1 、js的入口函数:要等待文档树的加载完成,并且等待所有图片、文件都加载完成之后才开始执行。
2 、jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载
3 、js的入口函数:
window.onload = function () { console.log("我是js的入口函数"); };
4 、DOM对象:使用js的方法获取到的页面中的元素返回的就是DOM对象
5 、jquery对象:使用jquery的方法获取到页面中的元素,返回的就是jquery对象
6 、DOM对象只能调用DOM对象的属性和方法,不能调用jquery对象的属性和方法
7 、jquery对象不能调用dom对象的方法和属性
基本选择器:设置样式:.css(“”,””); css(name, value);
过滤选择器:$(“li:odd”).css(“name”,”value”);
$(“li:even”).css
$(“li:eq(index)”).css index是变量的话要冒冒加加 或者 .eq(index)
查找的是所有后代元素,一般来说find这个参数是有必要
二、操作部分1
1、class操作: 添加类.addClass(“basic”);
移除类.removeClass(“basic”);
判断类.hasClass(“name”);
切换类.toggleClass(“name”);
2、jQuery动画显示与隐藏:.show(10000,function(){alert(“动画执行完了”);}); .hide()
callback:回调,动画执行完了,才开始执行
(改变的样式:width,height,opacity)
滑入滑出:使用方法和显示隐藏使用方法基本一样
slideDown slideUp slideToggle
(改变的样式:height)
淡入淡出:用法与滑入滑出用法一模一样
.fadeIn .fadeOut fadeToggle .fadeTo(1000,0.5)
(淡入淡出修改的是opacity)
3、jQuery动画版下拉菜单: $(this).children("ul").stop().slideDown();
$(this).children("ul").stop().slideUp();
4、jQuery自定义动画:.animate({“left”:”600px”,””:””},1000)
自定义动画 : animate(obj, speed, [easing], [callback])
easing参数:控制动画的执行速度
swing:摇摆(秋千)(默认)(先慢,再快,后慢)
linear:匀速效果
360开机动画:animate(obj,speed,function(){})
动画队列:每一个元素都有动画动画队列
5、 停止动画:
stop():停止当前动画
clearQueue:是否清除动画队列(true/false)
jumpToEnd:是否跳转到当前动画最终效果(true/false)
6、添加节点
append:添加到子级的最后面
prepend:添加到子级的最前面
after:添加到调用者的后面,作为兄弟元素
before:添加到调用者的前面,作为兄弟元素
城市选择案例: var $option = $("#src-city>option:selected");
$("#tar-city").append($option);
Html方法:$("div").html("<h1>我是标题</h1>");//设置内容
console.log($("div").html());//什么都不传,就是获取
7、表格生成案例:,用对象数组获取数据。再通过字符串的拼接,最后.html(str);
html(): html(htmlStr) :设置内容
html():获取内容
清空元素(清理门户):empty()推荐
html("")
删除元素(自杀):remove()
8、克隆元素:
var $p = $("p").clone(); $p.html("我改变了内容"); $("div").append($p);
clone() :深度复制 放在事件上面则可以触发事件
放在事件下面不可以触发事件,要触发必须加 clone(true)
clone(true):事件也会复制上
9、 属性操作(jquery操作DOM):属性操作用attr()方法 用法跟css方法一样
设置单个属性:attr(name, value)
设置多个属性:attr(obj)
获取属性:attr(“name”) :注意:
移除属性:removeAttr(name):移除属性
三、操作部分2与事件部分
1、prop(“ ”,true/false)方法:disabled/selected/checked 布尔类型的值用prop放法
2、表格全选案例:1获取头prop(“checked")是否选中,设置身的是否选中
2通过比较 allLength 与checkedLength( $("#j_tb input:checked").length) 是否相等,来设置头是否选中
3、操作value值: val(value):设置值 (文本框text)
val():获取值
4、操作内容: html(value):设置内容,能识别html标签
html():获取内荣,能获取到标签
text(value):设置内容,会转义html标签(带标签)
text():获取内容,丢弃html标签
5、操作宽度和高度(number):width(value):设置宽度 .css("height")):获取的会有单位px
width():获取宽度
height(value):设置高度
height():获取高度
6、操作位置:
offset():相对文档
offset({top:20,left:0}):设置位置,注意如果没有定位,会加上position:relative
offset():获取{top:20,left:0} css({“”:”” ,””:””})相对有定位的设置:子绝父相
position():相对有定位的父元素
只能获取,不能设置
7、 操作滚动: $(window).scroll(function () {};
scrollTop(value):设置
scrollTop():获取卷去的垂直距离 number
scrollLeft(value):设置卷去的水平距离
scrollLeft():获取卷去的水平距离
8、on方式注册事件(★★★★★)
给自己绑定事件:$("div").on("click", function(){})
注册代理事件:$("div").on("click", "p", function(){}) (添加的标签也可以有事件)
如果一个元素上有多个事件,首先会处理委托事件,然后处理本身的事件
9、解绑事件:
off():解绑所有的事件,包括代理事件
off("click"):解绑指定的事件
off("click", "**");解绑代理事件
10、触发:
click():会
trigger("click"):会
triggerHandler("click"):不会触发默认行为
11、按键变色案例:$(document).keydown事件 然后 var keyCode = e.keyCode; 然后通过.css() 设置背景色
12、事件对象
Event.data data参数不能传字符串,应该传对象
$("div").on("click", {"name":"zs", age:18}, function (e) { alert("哈哈,我有" + e.data.name); }) });
event.keyCode
event.stopPropagation() 阻止事件冒泡
event.preventDefault() 阻止浏览器默认行为
return false:既能阻止事件冒泡,还能阻止浏览器的默认行为。
13、五角评分案例:①li注册mouseenter事件:当前元素实心,前面为实心、后面为空心
②ul注册mouseleave事件:所有li为空心
找到添加active类的li,设置实心,前面也为实心
③li注册click事件:当前li添加active类,其它兄弟元素移除该类
14、显示迭代:
for()手动迭代
each(function(index,element){})
15、 多库共存:
$.noConflict()
四、链式编程
1、链式编程:1. 只有设置性的操作才能链式下去。(return this)
2. 获取性操作不能链式下去(因为要返回具体指) width() number css("backgroundColr") string
3. 使用筛选选择器的时候要慎用,会修改jquery对象里面的DOM对象。
如何解决:
重新写
end()
2、jQuery.Color插件的使用:颜色渐变
3、jQuery.lazyload插件的使用:页面,滑到才加载图片等出来
4、如何制作插件:
$.fn.changeGreen=function(){this.css("backgroundColor", "green");}
5、jquery-ui.js的使用:新闻模块