jQuery简单知识
$(function(){})和window.onload区别
-
$(function(){}) document ready就执行
window.onload 所有资源加载完毕执行
-
$(function(){})可以多次执行
window.onload只能执行一次
jquery方法
- 获取和设置html: html(“参数”)
- 获取value: val(“参数”)
//原生js与jquery对象的转换
//1.原生js===>jquery对象
//方法$(原生节点)
var username = document.getElementById("username);
console.log(username);
console.log($(username));//转化成jq对象
//2.jquery对象===》原生节点
//jquery对象[0]
var myuser = $("#username);
console.log(myuser);//jq对象
console.log(mysuer[0]);//jq对象中的第一个,是原生js节点;
//循环遍历出来的是原生js的节点,要获取value要用js的方法,
注意:js节点用js的方法,jq对象用jq的方法。
-
属性操作
- 获取:attr(“属性名”)
- 设置: attr(“属性名”,“属性值”)
- 设置多个值:attr({“属性名”:“属性值”,“属性名”:”属性值“})
- 删除:removeAttr(“属性名”)
-
class操作(值指的是类名)
- addClass(“值”)
- removeClass(“值”)
- toggleClass(“值1 值2”) 两个class转换
-
操作css
- 获取css样式 jquery对象.css(“属性名”);如果想要获取多个css属性值用中括号括起来。[“属性名1”,“属性名2”,“属性名3”];返回对象
- 设置css样式 jquery对象.css(“属性名”,“属性值”);设置多个属性时,使用json格式。jquery对象.({“属性名1”:“属性值1”,“属性名2”:"属性值2})
-
节点操作
-
内部插入节点
- 在后方插入节点:jQuery对象.append(要插入的节点) ----appendTo
- 在前方插入节点:jQuery对象.prepend(要插入的节点) ----prependTo
-
外部插入节点
- jquery对象.before(“插入的内容”)
- jquery对象.after(“插入的内容”)
-
包裹节点
- 被包裹的节点.wrap(“被什么节点包裹”)
- warpAll()吧所有符合条件的元素作为一个整体,在外包裹一层
- 移除包裹:被包裹的节点.unwrap(那个包裹)
-
复制
- 需要被复制的节点.clone()
- true深克隆,复制节点及其事件行为
- flase默认 浅克隆,复制节点,注意的是如果不想复制行为,绑定事件不能采用on开头的事件属性
-
删除节点
- 需要删除的节点.remove();
-
替换节点
- 被替换的节点.replaceWith(要替换的事件)
-
-
循环each
- 选择器.each(function(参数1,单数2){})
- $.each(数组/对象,function(参数1,参数2))
-
事件类型
- click keydown keyup …
-
事件绑定
- 直接使用事件名 click keydown keyup
- 通过on绑定事件 jq对象.on(“事件”,函数)
- on绑定的事件,对现有的和未来的(动态生成的对象)都使用
- 通过bind绑定事件
通过on/bind可以绑定多个事件,并且每个事件都有单独的处理程序。
//on/bind绑定多个事件 $("选择器").on({ "click":function(){}, "mouseober":function(){} }) //bind用法类似
- trigger()触发被选择元素上指定的事件及事件的默认行为,还可以用在自定义行为上
- 取消事件绑定 jq对象.off() 取消所有的事件绑定
- 取消单个事件绑定 jq对象.off(“事件名称”)
-
动画
- show();
- hide();
- toggle();动画的切换操作
- sideDown()
- sideUp()
- sideToggle()
- fadeIn()淡入
- fadeOut()淡出
- fadeToggle()
- fadeTo(事件,透明度)
-
自定义动画 animate()
选择器.animate()({
属性1:值1,
属性值2:值2
},时间ms)
//属性只能是由数字的属性
//animate() 默认调用队列
//delay() 可以延迟动画的执行。
//stop() 只会停止第一个队列的动画,后面继续执行
//stop(布尔值,布尔值),
// 参数一:是否清空所有动画
// 参数二:是否停止到最后状态