常用的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 相关文章推荐
JS在IE下缺少标识符的错误
Jul 23 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue实现按钮切换图片
Jan 20 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP经典面试题集锦
2015/03/19 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
大学生应聘自荐信
2013/10/11 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js