常用的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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
window.location.hash知识汇总
Nov 09 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
js实现随机点名功能
Dec 23 Javascript
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
PHP网站基础优化方法小结
2008/09/29 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue实现导出excel表格功能
2018/03/30 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
原生JS生成指定位数的验证码
2020/10/28 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
实例讲解python中的序列化知识点
2018/10/08 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
NumPy中的维度Axis详解
2019/11/26 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
QQ空间主人寄语大全
2014/04/12 职场文书
党员个人总结自评
2015/02/14 职场文书
一个都不能少观后感
2015/06/04 职场文书
百年校庆感言
2015/08/01 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
bose降噪耳机音能消除人声吗
2022/04/19 数码科技