JQuery小知识点代码
1、链式操作
$(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){
alert(123);
});*/ $('#div1').html('hello').css('background','red').click(function(){
alert(123);
}); });
2、取值赋值合体
$(function(){ //oDiv.innerHTML = 'hello'; //赋值 //alert( oDiv.innerHTML ); //取值 在JQuery中,用同一个函数html()同一个方式就实现了。 //$('#div1').html('hello'); //赋值 //alert( $('#div1').html() ); //取值 css('width','200px')
css('width')
});
$(function(){ $('li').html("sssss"); ; //当一组元素的时候,取值是一组中的第一个.赋值则可以全部改变! //$('li').get().innerHTML('hello'); //当一组元素的时候,赋值是一组中的所有元素
//$('li').get(0).innerHTML = "ssss"; //上面一种经测试有问题,这种才能通过。
});
/*window.onload = function(){
var obj = document.getElementsByTagName("li")[0];
//alert(obj); obj.innerHTML = "html";
}*/
3、attr
//jquery中的css()是用来操纵style{}的,而attr()是加在标签内部的,attr()的权重比css()要大,它会覆盖css()的样式 $(function(){ //alert($('div').attr('title')); $('div').attr('title','456');
$('div').attr('class','box'); });
4、filter,not,has
//filter : 过滤
//not : filter的反义词 $(function(){ //$('div').filter('.box').css('background','red');
//find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。
//$('div').find('.box').eq(1).css('background','red');
//$('div').has('.box').css('background','red');//而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。并且是所有符合的前辈元素。
//$('div').not('.box').css('background','red');
//$('li').filter('[title=hello]').css('background','red');
$('div').filter('[class != box]').css('background','red');
//alert( $('#h').index() ); //索引就是当前元素在所有兄弟节点中的位置,从0开始;
});
5、addClass,removeClass
$(function(){ $('div').addClass('box2 box4');//让它属于多个类,拥有多各类的样式; $('div').removeClass('box1'); });
6、append,appendTo,appendChild,removeChild,remove,empty;
1,追加与删除HTML元素
创建HTML元素
var newEle =document.createElement(p);
创建的元素追加到别的元素之后:
A. appendChild(B): 若B是新建的元素,在A元素的所有子元素的末尾增加元素B 。
若B页面中已存在的元素,则这句语句产生的效果是将B元素移动到了A的子元素中。
appendChild()这个函数和innerHTML这个属性的效果差不多,区别在:1 innerHTML运行效果会比appendChild慢(也许是需要解析的原因) 2 innerHTML比appendChild要方便些,像写字符串似的。
还有另外两个元素:
append() 和appendTo()这两个函数呢是jquery的函数。使用模式为:
append()前面是要选择的对象,后面是要在对象内插入的元素内容。
$("p").append("<b>Hello</b>");
appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素。所以,要选择先前选中的元素,需要使用 end()方法,参见例二。
example1:
$("p").appendTo("div");
//将p标签的所有追加到div标签集合中;
example2:
$(function(){
$('<div>content</div>')
.appendTo("div")
.addClass("test")
.end()最近的1次破坏性操作是对这两个新建的div设置分别设置class,还原的话就是还原到上一步操作appendTo所选中的元素:即 新建第二个div并添加。;
.addClass("test2");
});
结果:<div><div class = "test"></div></div>
<div><div class = "test test2"></div></div>
7、事件的写法
$(function(){ /*$('div').click(function(){
alert(123);
});*/ /*$('div').on('click',function(){
alert(123);
});*/ /*$('div').on('click mouseover',function(){
alert(123);
});*/ /*$('div').on({
'click' : function(){
alert(123);
},
'mouseover' : function(){
alert(456);
}
});*/ $('div').on('click mouseover',function(){
alert(123);
$('div').off('mouseover');
}); });
8.$(function(){
/*$('div').click(function(ev){
//ev : event对象
//ev.pageX(相对于文档的) : clientX(相对于可视区)
//ev.which针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。
ev.preventDefault(); //阻止默认事件
ev.stopPropagation(); //阻止冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});*/
$('div').one('click',function(){ //只执行事件一次
alert(123);
});
});
浏览器的默认行为:
你在空白的地方按 空格键 页面会向下滚动 安方向键 滚动条也会滚动
如果你用键盘的方向键和空格键 来做 在线音乐 控制音量切换歌曲暂停什么的,你就需要阻止浏览器默认行为
冒泡事件:
比如子盒子和父盒子都有onclick事件,那么当点击子盒子时,不仅会出发子盒子的点击事件,父盒子以及祖宗盒子的点击事件都会触发!
9、offset和position(),offsetParent
$(function(){ //var div22 = document.getElementById('div2');
console.log("22" ); //js中内元素外边框到父元素内边框左侧距离 //alert( $('#div2').offset().left ); //获取到屏幕的左距离;offset()方法返回或设置匹配元素相对于文档的偏移( 位置)。返 回第一个匹配元素的偏移坐标。
//该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。 //alert( $('#div2').position().left ); //到有定位的父级的left值,把当前元素转化成类似定位的形式
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。 所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。 该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。此外,position()函 数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。 });
使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。
可以看看下边的图:
从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离,它会忽略外层元素。
offsetParent:
//parent() : 获取父级
//offsetParent() : 获取有定位的父级,即只要定位position:不是static; //$('#div2').parent().css('background','blue'); $('#div2').offsetParent().css('background','blue');
10. hover
//hover第一个参数就是鼠标放上执行的函数,第二个是鼠标离开执行的函数;
//当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见 错误)
11、paresents(),closest();nextAll(),preAll(),Util(),clone(),animate()
//parents() : 获取当前元素的所有祖先节点,参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个;
//siblings() : 找所有的兄弟节点,参数也是筛选功能
//nextAll() : 下面所有的兄弟节点,参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )
参数 | 描述 |
---|---|
withDataAndEvents | 可选/Boolean类型是否同时复制元素的附加数据和绑定事件,默认为false 。 |
deepWithDataAndEvents | 可选/Boolean类型是否同时复制元素的所有子元素的附加数据和绑定事件,默认值即为参数withDataAndEvents 的值。 |
animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
//第四个参数 : 回调函数
$(function(){ $('#div1').click(function(){ $(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
alert(123);
}); $('#div2').animate({width : 300 , height : 300} , 4000 , 'swing'); }); });
$('#div2').click(function(){ //$('#div1').stop(); //默认 : 只会阻止当前运动;不是所有运动都阻止; //$('#div1').stop(true); //阻止后续的运动; //$('#div1').stop(true,true); //可以立即停止到指定的目标点 $('#div1').finish(); //立即停止到所有指定的目标点 });
12.事件委托,delegate,undelegate,on
/*$('li').on('click',function(){
this.style.background = 'red';
});*/ $('ul').delegate('li','click',function(){ this.style.background = 'red'; $('ul').undelegate(); });
13.主动触发:trigger
$('#div1').on('click',function(){
alert(123);
}); $('#div1').trigger('click'); //主动触发被选元素的某一事件;
14工具方法
//$().css() $().html() $().val() : 只能给JQ对象用
//$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用,也可以给原生JS用 : 叫做工具方法
//inArray() : 类似于 indexOf
//alert( $.inArray('b',arr) );//在数组arr中找b的位置;
//$.type() : 也是判断类型
alert('('+$.trim(str)+')');//去除前后空格;原生的得写正则
//proxy() : 改变this指向的
function show(n1,n2){...}
//$.proxy(show , document,3)(4);
//$.proxy(show , document)(3,4);//可以这样传参数,但是这样相当于函数调用,直接执行。
$(document).click( $.proxy(show,window,3,4) );//可以这样传参数,这样是在事件操作时执行;
//noConflict() : 防止冲突的
/*var miaov = $.noConflict();
var aDiv = document.getElementsByTagName('div'); //;类似数组,并不是真正数组; $.makeArray(aDiv).push();//将类似数组转换成数
15.插件
//即使插件写错,也不影响库的使用, //$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy() //$.fn.extend : 扩展到JQ对象下的插件形式(只能jq对象用) $().xxx() $().yyy() $.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
rightTrim : function(){},
aaa : function(){
alert(1);
},
bbb : function(){}
});
16.绑定事件
<script>
$(document).ready(function(){
//bind绑定单击事件;
$('p').bind('click',function(){
alert($(this).text())});
$('p').mouseover(function(){
$(this).css('background','red');});
//unbind移除绑定事件,可以同时移除好几个;
$('p').unbind('click mouseover');
})
</script>
<body>
<p>这是个标签</p>
</body>
</html>
//bind和unbind事件;
/*使用绑定事件可以防止事件冒泡。
对于表单submit事件,为了防止提交后跳转(默认事件?),需要.preventDefault();
为了阻止冒泡,click事件的冒泡,需要.stopPropagation();
使用bind,只要在bind参数里加true或false就可以了。默认是true;(试验中,发现只有不写第三个参数时编译才通过。)*/
//******************************************************
//one事件,只执行一次事件,就销毁事件;
//delegate事件,对新增加的标签添加事件;用click效果一样,但是没有为新增的标签加事件的功能;undelegate;
/*
$('p').delegate('p',function(){
$('body').append('<p>我是新增的标签</p>');
});
*/ 官方推荐用delegate时用on代替,undelegate用off代替,实际用的不多;//用bind还可以为事件绑定命名空间,这样在unbind时就可以删除指定命名空间的事件。.bind('click.mingmingkongjian',function(){});
四种方式的异同和优缺点(bind(),on(),delegate(),live();)
相同点:
1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;
比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;
2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;
3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差。
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
总结
如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替
JQuery小知识点代码的更多相关文章
- jQuery 小知识点(插件)
1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...
- JQuery小知识点
//get() : 就是把JQ转成原生JS,可以让通过jquery获得元素使用JS的innerHTML方法. $(function(){ //document.getElementById('div1 ...
- Intel项目所用jquery小知识点总结
1.$("#tdGeo input[type='checkbox']:checked") ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...
- jquery 小知识点
//计算checkbox有多少个被选中 $("input[name='user_apply']:checked").length)://可以查看 所有的name=user_appl ...
- 10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
- 人人必知的10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...
- 程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...
- (网页)人人都会的35个Jquery小技巧
转自CSDN: 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(&q ...
- 人人必知的10个 jQuery 小技巧
原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧 收集的10个 jQuery ...
随机推荐
- iOS开发——生命周期
为了处理好应用程序的挂起.暂停等情况下的数据保存,或对应添加所需处理,我们必须了解ios生命周期. 但是不要去背去记,做个实验就好. - (BOOL)application:(UIApplicatio ...
- 第03章—打造RESTful风格API
spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...
- 小程序wxParse插件的使用
微信小程序输出html内容数据插件wxParse,可以把带html标签的数据输出为微信小程序正常显示的格式,wxParse插件带有演示,也有使用文档说明. 下载地址:https://github.co ...
- 我的Android进阶之旅------>解决:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'.
错误描述 今天在Android Studio项目中加入了jackson的开发包,编译运行时候,引发了如下的错误: Error:Execution failed for task ':app:trans ...
- 服务系统 server端
from django.shortcuts import render,HttpResponse import json # Create your views here. from reposito ...
- 五分钟学会 Kotlin 语法
为什么使用Kotlin 项目一期在收尾了终于有时间折腾了,一个多月以来Kotlin从入门到现在,坚持用来开发的切身感受.因为语法与Java的区别挺大的一开始很想放弃,如果不是因为项目在使用,想必很少人 ...
- 吴超老师课程--Hive的介绍和安装
1.Hive1.1在hadoop生态圈中属于数据仓库的角色.他能够管理hadoop中的数据,同时可以查询hadoop中的数据. 本质上讲,hive是一个SQL解析引擎.Hive可以把SQL查询转换为 ...
- s5_day14作业
import re # 1. 匹配一段文本中的每行的邮箱 # ret=re.findall('\w+@\w+\.com','10000@qq.com,qwe48645313@163.com') # p ...
- 解决XAMPP不能启动Apche服务问题
打开command prompt输入命令 netstat -ano 查看哪个 PID的进程占用了80端口.结果是inetinfo.exe 网上查了下,正是WIN XP IIS的进程,但是又不想删,就只 ...
- Educational Codeforces Round 11B. Seating On Bus 模拟
地址:http://codeforces.com/contest/660/problem/B 题目: B. Seating On Bus time limit per test 1 second me ...