常用的JQuery函数及功能小结


Posted in Javascript onMarch 24, 2016

1.文档加载完成执行函数

$(document).ready(function(){
alert("开始了");
});

2.添加/删除CSS类

$("#some-id").addClass("NewClassName");
$("#some-id").removeClass("ClassNameToBeRemoved");

3.选择符 利用了CSS和Xpath(XML Path Language)选择符的能力,以及jQuery独有的选择符

3.1常用的:

1.根据标签名: $('p') 选择文档中的所有段落

2. 根据ID: $("#some-id")

3.类: $('.some-class')

3.2使用CSS选择符:

$("#some-id > li") 选择特定id下的所有子li元素
$("#some-id li:not(.horizontal)") 伪类选择,特定id下所有没有.horizontal 类的li元素

3.3使用XPath选择符:

属性选择:$("a[@title]") 选择所有带title属性的链接

$("div[ol]") 选择包含一个ol元素的所有div元素

$('a[@href^="mailto:%22]') 选择所有带href属性[@href]且该属性值以mailto开头^="mailto"(^标识字符串开始,$标识字符串结

尾,*表示字符串中任意位置)

$('a[@href$=".pdf"]') 选择带有href属性且该属性值以.pdf结尾的所有链接

$('a[@href*="mysite.com"]') 选择mysite.com出现在href任意位置(包含mysite.com)的所有链接

3.4JQuery自定义选择符(过滤器,从已选择的结果集中过滤出符合某一条件的所有元素),与CSS的伪类选择符相似,使用“:”开头

1.$('div.horizontal:eq(1)') 选择带有类horizontal的div集合中的第2个项

$('div:nth-child(1)') 选择作为其父元素第1个子元素的所有div

2.自定义选择符:odd和:even选择奇偶行

$('tr:odd').addClass('odd'); //过滤选择结果集中的奇数元素

$('tr:even').addClass('even'); //过滤选择结果集中的偶数元素

3.自定义选择符:contains()

$('td:contains("Henry")') 选择包含Henry字符串的所有表格

3.5JQuery选择函数

1.$('#some-id').parent() 选择特定元素的父元素

2.$('#some-id').next() 选择特定元素最近的下一个同级元素

3.$('#some-id').siblings() 选择特定元素的所有同级元素

4.$('#some-id').find('.some-class') 选择特定元素下所有包含特定类的元素

5.$('#some-id').find('td').not(':contains("Henry")') 选择特定元素下表格内容不包含Henry的所有元素

5.$('#some-id').find('td').not(':contains("Henry")').end() .end()表示回到最后一次.find()的元素处

3.6访问DOM元素,使用get()方法从选择后的JQuery对象中获得,去掉JQuery的包装

var myTag = $('#some-id').get(0).tagName;
var myTag = $('#some-id')[0].tagName; //与上面的等效

4.事件(都是给某一元素绑定事件)

4.1绑定事件

$("#some-id").bind("click", function(){ })
$("#some-id").unbind("click", bindedFunctionName); //移除已绑定的事件,前提是绑定的函数有名称(不是匿名函数)
$("#some-id").click(function(){ })

4.2复合函数绑定事件

$("#some-id").toggle(function(){ } ,function(){ }); //交替执行
$(“#some-id”).toggleClass("hidden"); // 添加/删除类交替进行
$("#some-id").hover(function(){ }, function(){ }); //鼠标进入元素时执行第一个函数,离开元素时执行第二个函数
$("#some-id").one("click", functionName); //只需触发一次,随后便立即解除绑定

4.3模仿用户触发某一事件

$("#some-id").trigger("click"); //触发特定元素的click事件

5.为元素添加效果

5.1读取或设置CSS样式属性

$("#some-id").css("property") //读取样式值
$('#some-id').css('property', 'value') //设置一个样式值
$('#some-id').css({property1: 'value1', property2: 'value2'}) //设置多个样式属性

5.2改变字体大小

$(document).ready({
$('#button-id').click(function(){
var currentSize = $('#text-id').css('fontSize'); //获取字体大小,如30px
var num = parseFloat(currentSize, 10); //将值转为浮点数,.parseFloat( , )为javascript内置函数,这里是转为10进制的浮点数
var unit = currentSize.slice(-2); //获取单位名称,如px,.slice()是javascript内置函数,获取字符串指从定位置开始的子字符串,-2表示倒数两个字符
num *= 1.5;
$('text-id').css('fontSize', num + unit); //设置字体大小样式
});
});

5.3隐藏和显示

$('#some-id').show(); //无效果,会自动记录原来的display属性值(如:block, inline),再回复display值
$('#some-id').hide(); //无效果,等效于:$('#some-id').css('display', 'none'); 隐藏元素,不保留物理位置
大小、透明度逐渐变化的显示或隐藏

$('#some-id').show('slow'); //指定显示速度,在指定时间内元素的高、宽、不透明度逐渐增加到属性值,有:slow是0.6秒,normal是0.4秒,fast是0.2秒,或者直接填入毫秒数
$('#some-id').hide(800); //与.show()指定速度显示一样,指定时间内高、宽、不透明度逐渐减小到0

淡入淡出

$('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0

5.4构建具有动画效果的show

主要调用.animate()方法,其有4个参数:包含样式属性及值的映射;可选的速度参数;可选的缓动类型;可选的回调函数;

1.并发显示多个效果

$('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
$('div .button').animate({left:600, height:44}, 'slow'); //水平位置从0移动到600,高度由0增加到44

2.排队显示多个效果,级联多个.animate(),一个效果显示完了再显示下一个效果

$('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');
6DOM操作

6.1属性操作

$('#some-id').attr('property'); //获取属性
$('#some-id').attr('property','value'); //设置属性
$('#some-id').attr({'property1': 'value1', 'property2': 'value2'}); //设置多个属性
修改一个段落中所有链接,并给每个链接附上新的id号
$('div p .content a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'link_' + index
});
});
// ********* JQuery的.each()类似一个迭代器,给其传递的参数index类似一个计数器 *********

6.2插入新元素

1.将元素插入到其他元素前面:.insertBefore()和.before()

2.将元素插入到其他元素后面:.insertAfter()和after()

3.将元素插入到其他元素内部或后面(相当于追加一个元素):appendTo()和append()

4.将元素插入到其他元素内部或前面(相当于追加一个元素):prependTo()和prepend()

6.3包装元素,将元素包装到其他元素中 .wrap();

$('#some-id').wrap('<li></li>'); // 将某一特定元素包装到li中,即在特定元素外围添加一个包围元素

6.4复制元素 .clone()

1.$('#some-id').clone().appendTo($('body'));

2.复制深度,当传入false参数时,只复制匹配上的元素,其内部的其他元素不复制

$('#some-id').clone(false)

注意:.clone()方法不会复制元素中的事件

6.5移除匹配元素中的元素,类似清空元素

$('#some-id').empty();

6.6从DOM中移除匹配的元素及其后代元素

$('#some-id').remove();

有关常用的JQuery函数及功能小结 小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
JS判断数组那点事
Oct 10 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 #Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 #Javascript
java中String类型变量的赋值问题介绍
Mar 23 #Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 #Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
一段php加密解密的代码
2006/10/09 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
tensorflow 变长序列存储实例
2020/01/20 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
商铺门前三包责任书
2014/07/25 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
民主生活会剖析材料
2014/09/30 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
党支部书记岗位职责
2015/02/15 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python