jquery散记
感觉jquery的用法都要忘没了,简单捡一下
1、window.onload与$(document).ready的区别
()编写个数
window.onload = function(){} //不能同时编写多个,后面的会把前面的覆盖掉
$(document).ready(function(){}) //能同时编写多个
()window.onload //无简化写法
$(document).ready(function(){})
简写:$(function(){})
2、jquery对象和Dom对象相互转换
()jquery转dom
$('div')[]
$('div').get() ()dom转jquery
var dom=document.getElementById('div')
$(dom) //变成jquery对象了 eg:$(document).ready(function(){
var $cr=$('#cr');
var cr=$cr[0];
$cr.click(function(){
if(cr.checked){alert(123)}
//或者
if($cr.is(":checked")){alert(123)}
})
})
3、解决jquery和其他库冲突
jQuery.noConflict() //将变量$的控制权移交给prototype.js
jQuery(function(){
jQuery("p").click(function(){
alert(jQuery(this).text())
});
})
//可以自定义快捷方式
var $j=jQuery.noConflict()
$j(function(){
$j("p").click(function(){
alert($j(this).text())
});
}) (function($){
$('p').click(function(){})
})(jQuery)
4、jquery选择器
()检查某元素在方也上是否存在
if($('div')) /$('div').length /$('div')[] ()
$('*') //获取所有元素
$("parent>child") ==>$('#parent').next("div")
$("prev+next")
$("prev~siblings") //选取prev元素后面的所有同辈元素 ==>$(.prev').nextAll('div') $("input:not(.myClass)") //选取class不是myClass的元素
$("input:even")
$("input:odd")
$("input:eq(1)") //选取索引等于1
$("input:gt(1)") //大于1
$("input:lt(1)")
$(":header") //选取网页中所有的<h1> <h2>...
$("div:animated") //选取正在执行的动画
$(":focus")
$("div.contains('我')") //选取含有文本‘我’的<div>元素
$("div:empty") //选取不包含子元素的civ
$("div:has(p)") //选取含有<p>标签的div元素
$("div:hidden")
$("div:visible")
$('div[id]') //选取拥有属性id的元素
$("div[title='test']")
$("div[title!=test]")
$("div[title^=test]") //选取title以test开头
$("div[title$=test]")
$("div[title*=test]") //含有
$("div[title|='test']") //等于test或以test开头的
$("div[title~="uk"]") //title用空格分开包含字符uk
("div[id][title$='test']") //既包含id又以test结尾 $("div.one :nth-child(2)")
$("div.one :first-child")
$('#form:enabled') //所有可能的元素
$('#form:disabled')
$('input:checked')
$('select option:selected') :input //选取所有的 input textarea select button
:text
:password
:radio
:checkbox
:reset
:button //选取所有button按钮
:file
:hidden
5、jquery的事件
()on事件
$('p').on('click',{foo:'bar'},test)
function test(event){alert(event.data.foo)} //取值 $('form').on('submit',false) $('form').on('submit',function(event){
event.preventDefault();
}) $('form').on('submit',function(event){
event.stopPropagation();
})
(2)off
$('p').off() //去掉所有绑定事件
$('p').off('click',function(){}) var foo=function(){} $('body').on('click','p',foo)
$('body').off('click','p',foo)
6、回调函数
(1)callbacks.add
var callbacks=$.Callbacks();//使用 callbacks.add() 添加新的回调到回调列表:
var foo = function(value){
alert(value)
}
callbacks.add(foo);//添加回调函数
callbacks.fire('work');//传入参数调用所有列表
(2)callbacks.disable() //禁用回调列表中的回调
callbacks.disable()
(3)callbacks.empty() //从列表中删除所有的回调
var callbacks=$.Callbacks();
callbacks.add(foo);
callbacks.add(bar); callbacks.empty()
console.log(callbacks.has(foo));//false
(4)callbacks.fire(arguments)
使用 callbacks.fire() 用任何已传递的参数调用列表中的回调:
(5)callbacks.fired(); //使用callbacks.fired() 确定,如果列表中的回调至少有一次被呼叫
测试是否已调用回调
(6)callbacks.fireWidth([context][,args]);//访问给定上下文和参数列表的所有回调
var log =function(val1,val2){
console.log(val1,val2)
}
var callbacks=$.Callbacks();
callbacks.add(log); callbacks.fireWith(window,['foo','bar']); //输出 foo ,bar :相当于执行函数并传递参数
(7)callbacks.has(callback) //判断是否含有某个回调
(8)callbacks.lock() //用 callbacks.lock()锁定一个回调列表,以避免进一步的修改列表状态 :
//被锁定了,执行不了callbacks.fire('bsggsh')
(9) callbacks.locked() //判断是否已经锁定回调列表
callbacks.lock();
console.log(clabacks.locked());//true
(10)callbacks.remove(callbacks);//删除回调或回调集合
(11)flgs
once,memeory,unique,stopOnfalse
jquery散记的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
随机推荐
- 2017北京网络赛 J Pangu and Stones 区间DP(石子归并)
#1636 : Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the fi ...
- 视频编解码 基本概念:GOP
前言 产品开发要求添加视频剪辑功能,翻阅有关的文档,查到了GOP(group of pictures)这个概念. 解析 GOP说白了就是两个I帧之间的间隔.比较说GOP为120,如果是720p60的话 ...
- C2 - Skyscrapers (hard version)
前几天做的题,当时好像是超时了,这个博客写的超好https://blog.csdn.net/lucky52529/article/details/89155694 用单调站解决问题. 代码是从另外一篇 ...
- 水费管理系统-ER图和流程图
ER图:
- Android实现三级联动下拉框下拉列表spinner
原文出处:http://www.cnblogs.com/zjjne/archive/2013/10/03/3350107.html 主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下 ...
- Day8 - B - Non-Secret Cypher CodeForces - 190D
Berland starts to seize the initiative on the war with Flatland. To drive the enemy from their nativ ...
- Spring 配置Beans
<bean id="UserDao" class="com.jikexueyuan.dao.impl.UserDaoImpl"> <prope ...
- 吴裕雄--天生自然java开发常用类库学习笔记:Set接口
import java.util.HashSet ; import java.util.Set ; public class HashSetDemo01{ public static void mai ...
- 安装phpmyadmin数据可视化
1.下载压缩包,并且解压 cd /usr/local/src wget https://files.phpmyadmin.net/phpMyAdmin/4.9.4/phpMyAdmin-4.9.4-a ...
- java 九数组分数
九数组分数 1,2,3-9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. public class A { public static vo ...