jQuery的一些特性和用法整理小结


Posted in Javascript onJanuary 13, 2010

1.精准简单的选择对象(dom):

$('#element');// 相当于document.getElementById 
("element") 
$('.element');//Class 
$('p');//html标签 
$("form > input");//子对象 
$("div,span,p.myClass");//同时选择多种对象 
$("tr:odd").css("background-color", "#bbbbff");//表格的 
隔行背景 
$(":input");//表单对象 
$("input[name='newsletter']");//特定的表单对象

2.对象函数的应用简单和不限制:
element.function(par); 
$(”p.surprise”).addClass(”ohmy”).show(”slow”)...

3.对已选择对象的操作(包括样式):
$("#element").addClass("selected");//给对象添加样式 
$('#element').css({ "background-color":"yellow", "font 
-weight":"bolder" });//改变对象样式 
$("p").text("Some new text.");//改变对象文本 
$("img").attr({ src: "test.jpg", alt: "Test Image" 
});//改变对象文本 
$("p").add("span");//给对象增加标签 
$("p").find("span");//查找对象内部的对应元素 
$("p").parent();//对象的父级元素 
$("p").append("<b>Hello</b>");//给对象添加内容

4.支持aJax,支持文件格式:xml/html/script/json/jsonp
$("#feeds").load("feeds.html");//相应区域导入静态页内容 
$("#feeds").load("feeds.php", {limit: 25}, function() 
{alert("The last 25 entries in the feed have been 
loaded");});//导入动态内容

5.对事件的支持:
$("p").hover(function () { 
$(this).addClass("hilite");//鼠标放上去时 
}, function () { 
$(this).removeClass("hilite");//移开鼠标 
});//鼠标放上去和移开的不同效果(自动循环所有p对象 
)

6.动画:
$("p").show("slow");//隐藏对象(慢速渐变) 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em" 
}, 1000 ); 
});//鼠标点击后宽、高、字体的动态变化

7.扩展:
$.fn.background = function(bg){ 
return this.css('background', bg); 
}; 
$(#element).background("red");
Javascript 相关文章推荐
获取body标签的两种方法
Oct 13 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
海量经典的jQuery插件集合
Jan 12 #Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 #Javascript
jquery下操作HTML控件的实现代码
Jan 12 #Javascript
jquery插件 cluetip 关键词注释
Jan 12 #Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 #Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 #Javascript
You might like
PHP与已存在的Java应用程序集成
2006/10/09 PHP
用文本作数据处理
2006/10/09 PHP
PHP 文件类型判断代码
2009/03/13 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Django model class Meta原理解析
2020/11/14 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
测量实习生自我鉴定
2013/09/19 职场文书
应届生高等护理求职信
2013/10/12 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
法学专业求职信
2014/07/15 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
委托收款证明
2015/06/23 职场文书