jQuery简单知识

jQuery简单知识

$(function(){})和window.onload区别

1. $(function(){}) document ready就执行

   window.onload 所有资源加载完毕执行

2. $(function(){})可以多次执行

   window.onload只能执行一次

jquery方法

1. 获取和设置html： html(“参数”)
2. 获取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的方法。

3. 属性操作

   • 获取：attr(“属性名”)
   • 设置： attr(“属性名”,“属性值”)
   • 设置多个值：attr({“属性名”：“属性值”，“属性名”：”属性值“})
   • 删除：removeAttr(“属性名”)

4. class操作（值指的是类名）

   • addClass(“值”)
   • removeClass(“值”)
   • toggleClass(“值1 值2”) 两个class转换

5. 操作css

   • 获取css样式 jquery对象.css(“属性名”)；如果想要获取多个css属性值用中括号括起来。[“属性名1”，“属性名2”，“属性名3”];返回对象
   • 设置css样式 jquery对象.css(“属性名”,“属性值”)；设置多个属性时，使用json格式。jquery对象.({“属性名1”:“属性值1”,“属性名2”:"属性值2})

6. 节点操作

   1. 内部插入节点

      • 在后方插入节点：jQuery对象.append(要插入的节点) ----appendTo
      • 在前方插入节点：jQuery对象.prepend(要插入的节点) ----prependTo

   2. 外部插入节点

      • jquery对象.before(“插入的内容”)
      • jquery对象.after(“插入的内容”)

   3. 包裹节点

      • 被包裹的节点.wrap(“被什么节点包裹”)
      • warpAll()吧所有符合条件的元素作为一个整体，在外包裹一层
      • 移除包裹：被包裹的节点.unwrap(那个包裹)

   4. 复制

      • 需要被复制的节点.clone()
      • true深克隆，复制节点及其事件行为
      • flase默认 浅克隆，复制节点，注意的是如果不想复制行为，绑定事件不能采用on开头的事件属性

   5. 删除节点

      • 需要删除的节点.remove();

   6. 替换节点

      • 被替换的节点.replaceWith(要替换的事件)

7. 循环each

   • 选择器.each(function(参数1，单数2){})
   • $.each(数组/对象，function(参数1，参数2))

8. 事件类型

   • click keydown keyup …

9. 事件绑定

   • 直接使用事件名 click keydown keyup
   • 通过on绑定事件 jq对象.on(“事件”，函数)
     • on绑定的事件，对现有的和未来的（动态生成的对象）都使用
   • 通过bind绑定事件

   通过on/bind可以绑定多个事件，并且每个事件都有单独的处理程序。

   //on/bind绑定多个事件
   $("选择器").on({
       "click":function(){},
       "mouseober":function(){}
   })
   //bind用法类似
   

   • trigger()触发被选择元素上指定的事件及事件的默认行为，还可以用在自定义行为上
   • 取消事件绑定 jq对象.off() 取消所有的事件绑定
   • 取消单个事件绑定 jq对象.off(“事件名称”)

10. 动画

    • show();
    • hide();
    • toggle();动画的切换操作
    • sideDown()
    • sideUp()
    • sideToggle()
    • fadeIn()淡入
    • fadeOut()淡出
    • fadeToggle()
    • fadeTo(事件，透明度)

11. 自定义动画 animate()

选择器.animate()({
	属性1：值1,
	属性值2：值2
},时间ms)
//属性只能是由数字的属性

//animate()  默认调用队列
//delay()  可以延迟动画的执行。
//stop()  只会停止第一个队列的动画，后面继续执行
//stop(布尔值，布尔值)，
	//	参数一：是否清空所有动画
	//	参数二：是否停止到最后状态