Jquery使用
一.基础
-
入口函数(文档树加载完成就开始执行)：
$(document).ready(function() {})和$(function() {}) -
$就是一个函数:
$();$ === jQuery参数不一样，功能不一样 -
jQuery对象与DOM对象之间的转换，jQuery对象其实就是DOM对象的包装集
-
jquery对象转DOM对象：
var $li = $("li");通过$li[0]或$li.get(0)获取 -
DOM对象转jquery对象：
var $obj = $(domObj);$(document).ready(function(){});就是DOM对象转jQuery对象
-
-
基本：
-
$("#id")ID -
$(".class")类 -
$("div")标签 -
$("div,p,li")并集 -
$("div.redClass")交集
-
-
层级：
-
$("ul>li")子代 -
$("ul li")包括孙子的后代元素
-
-
过滤(带冒号)：
-
$("li:eq(2)")索引号2的li -
$("li:odd")索引号为奇的li -
$("li:even")索引号为偶的li
-
-
筛选(类似过滤,用法不一样,是方法)：
-
$("ul").children("li")相当于子代选择器 -
$("ul").find("li")相当于后代选择器 -
$("#first").siblings("li")找兄弟不包括自己 -
$("#first").parent()找父亲 -
$("li").eq(2)相当于$("li:eq(2)") -
$("li").next()找下一兄弟 -
$("li").prev()找上一兄弟
-
三.操作样式
-
css操作
-
设置单个样式
$("#one").css("background","gray") -
设置多个
$("#one").css({"width":"400px","height":"200px"}) -
获取样式
$("div").css("background-color")
-
-
class操作
-
添加样式
$("div").addClass("one") -
移除样式
$("div").removeClass("one") -
判断有无类
$("div").hasClass("one") -
切换样式
$("div").toggleClass("one")
-
四.操作属性
-
attr
-
设置单个属性
$("#one").attr("background","gray") -
移除属性
$("div").removeAttr("one")
-
-
prop
-
对于布尔类型的属性，disabled，selected，checked，只能用prop
-
五.操作节点
-
创建节点
$("<span></span>") -
添加节点append appendTo prepend prependTo after before
-
清空内容empty
-
删除节点remove
-
克隆节点clone
六.动画
-
三组基本动画
-
基本效果show/hide
-
滑动slideDown/slideUp/slideToggle
-
淡入淡出fadeIn/fadeOut/fadeToggle
-
-
自定义动画
-
$(selector).animate({params},speed,callback);
-
-
停止动画stop
七.特殊属性操作
-
$("#name").val()：设置和获取表单元素的值input、textarea -
$("div").html()和$("div").text()：html方法相当于innerHTML text方法相当于innerText -
$(window).width()和$("img").height(200)：设置或者获取高度 -
$(window).scrollTop()和$(window).scrollLeft()：设置或者获取垂直滚动条的位置 -
$(selector).offset()和$(selector).position()：offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
八.事件机制
-
简单事件绑定(不能同时注册多个)：click(handler)
-
bind事件绑定(不支持动态事件绑定)：
$("p").bind("click mouseenter", function(){//事件响应方法}) -
delegate事件绑定：
$(".parentBox").delegate("p", "click", function(){//为.parentBox下面的所有的p标签绑定事件}); -
on事件绑定(推荐)：
-
注册简单事件(由自己触发不支持动态绑定)：
$(selector).on( "click", function() {}) -
注册委托事件：
$(selector).on( "click","span", function() {})给$(selector)绑定代理事件，它内部元素span才能触发这个事件，支持动态绑定
-
-
事件解绑：
-
$(selector).unbind("click") -
$( selector).undelegate( "click" ) -
$(selector).off("click")(推荐)
-
-
事件触发：
$(selector).click()、$(selector).trigger("click") -
事件对象
-
screenX和screenY距离屏幕最左上角的值
-
clientX和clientY距离页面左上角的值(忽略滚动条)
-
pageX和pageY距离页面左上角的值(会计算滚动条的距离)
-
event.keyCode按下的键盘代码
-
event.data存储绑定事件时传递的附加数据
-
event.stopPropagation()阻止事件冒泡
-
event.preventDefault()阻止浏览器默认行为
-
return false既能阻止事件冒泡，又能阻止浏览器默认行为
-
九.补充
-
链式编程：end()//改变jQ对象的DOM对象，回复到上一次状态，并返回匹配元素之前的状态
-
each()方法：遍历对象，操作匹配元素
-
多库共存：
var c = $.noConflict();//释放的控制权,并且把$的能力给了c
十.插件
-
常用插件：jquery.color.js支持颜色的渐变、jquery.lazyload.js懒加载插件、jquery.ui.js官方维护的UI方向的插件......
-
制作插件(给jquery对象增加一个新的方法，让jquery对象拥有某一个功能)：
$.fn.pluginName = function() {}//给$.fn添加方法就能扩展jquery对象
浙公网安备 33010602011771号