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等等,尤其后面两个控件的用户体验比较好, ...
随机推荐
- ThinkPad重大更新!5款创意设计PC齐发2日
导读 日前,ThinkPad巨匠P系列专业移动工作站迎来全线更新,包括ThinkPad P1隐士2019.ThinkPad P53.ThinkPad P73.ThinkPad P43s.ThinkPa ...
- Maven添加Tomcat插件实现热部署
Maven热部署,顾名思义就是可以不影响项目在服务器中的运行情况,可以实现项目代码的更新,减少启动,编译时间,达到快速开发的目的,也不需要手动拷贝war包到远程项目,可以直接将项目以及war包部署到远 ...
- Noip2018普及组初赛试题解题报告
解题思路: 一.单项选择题 (答案:DDDBBAAAABABBBB) 1.除D外,其余均为输入设备. 2.除D外,其余都等于(617)10 ,D选项为(619)10. 3.1MB=1024KB=102 ...
- dom与jq基础使用
js有两种运行环境,一个是浏览器,一个是服务器(NodeJS) js的本质是es,因为运行环境的不同,为了操作环境内的api做了升级 在浏览器上js分为es + dom + bom 在服务器上js又有 ...
- 【学CG系列】web之审查元素
一.审查元素的作用 审查元素(你的F12)可以做到定位网页元素.实时监控网页元素属性变化的功能,可以及时调试.修改.定位.追踪检查.查看嵌套 ,修改样式和查看js动态输出信息,是开发人员得心应手的好工 ...
- django ORM多对多正向查询时查询返回结果为None
表 class Books(models.Model): '''书籍''' id = models.AutoField(primary_key=True) name = models.CharFiel ...
- java 根据值获取枚举对象
关键方法: /** * 值映射为枚举 * * @param enumClass 枚举类 * @param value 枚举值 * @param method 取值方法 * @param <E&g ...
- 10nm Ice Lake处理器值得等待!
处理器.显卡等产品往往习惯先在 Linux 平台测试,所以 Linux 的内核源码往往成为曝光新品的宝藏之地. 经查,在 Linux v5.2 内核最新源码的 x86 分支中,出现了多款 Ice La ...
- Java8集合框架——LinkedHashSet源码分析
本文的目录结构如下: 一.LinkedHashSet 的 Javadoc 文档注释和简要说明 二.LinkedHashSet 的内部实现:构造函数 三.LinkedHashSet 的 add 操作和 ...
- 解决dispatch 后在当前页面不能获取最新的this.props中的数据
因为dispatch为异步方法 .解决这个问题方法很多 出去添加定时器这种不是很优雅的方法 我们可以用 componentWillReceiveProps(nextProps) 这个生命周期 ...