jQuery入门知识点
《精通ASP.NET MVC3框架》第20章
1、jQuery文件
jquery-1.5.1.js:jquey核心库常规版
jquery-1.5.1.min.js:jquery核心库最小化版
jquery-ui.js:jquery ui库的常规版
jquery-unobtrusive-ajax.js:非唐突ajax支持库的常规版
jquery-validate.js:非唐突客户端验证的常规版
jQuery-1.5.1-vsdoc.js:对核心库的只能感知支持
添加智能感知:
@if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
}
2、选择器
(1)基本的jquery选择器
$('*'):选择文档中所有元素
$('.myclass'):选择css的class值为myclass的所有元素
$('element'):选择<element〉类型的所有元素
$('#myid'):选择ID为myid的元素
$('td,th'):选择所有的td和th元素
$('td input'):选择包含在td元素中的所有input元素
(2)属性选择器
$('[attr]'):选择有attr属性的元素,不考虑属性值
$('[attr]="value"'):选择有attr属性且其值为value的元素
$('[attr]!="value"'):选择有attr属性且其值不为value的元素
$('[attr]^="value"'):选择有attr属性且其值以value开头的元素
$('[attr]~="value"'):选择有attr属性且其值包含value的元素
$('[attr]$="value"'):选择有attr属性且其值以value结尾的元素
$('[attr]|="value"'):选择有attr属性且其值为value或以value开头或value后跟连接符(value-)的元素
组合属性选择器:$('[type][value="delete"]'):选择有type属性,且value属性值为delete的那些元素
3、过滤器
$('td:eq(8)'):过滤与选择匹配的元素数组中的第9项
(1)基本过滤器
:eq(n)-选择所选内容的第n+1项
:even :old-选择偶数或奇数元素
:first :last-选择第一个或最后一个元素
:gt(n) :lt(n)-选择索引号大于或小于n的元素
:header-选择所有标题元素
:not(selector)-选择所有与选择器不匹配的元素
过滤器需要和选择器联合,当单独使用时,默认使用了$('*')选择器,如$(':header')
使用多个过滤器:$('td:odd:eq(1)'):选择td元素,对其过滤只保留奇数项,然后选择第2项
(2)内容过滤器
:contains('text') 选择含有text或其子元素含有text的元素
:has('selector') 选择至少有一个子元素与selector匹配的元素
:empty 选择没有子元素的元素
:parent 选择至少有一个其他元素的元素
:first-child 选择它们父节点的第一个子元素
:last-child 选择它们父元素的最后一个子元素
:nth-child(n) 选择它们父元素下的第n个子元素(索引从1开始)
:only-child 选择它们父节点的唯一子元素
(3)表单过滤器
:button 选择按钮元素,以及其type为button的input元素
:checkbox 选择复选框
:checked 选择被选中的复选框和单选按钮元素
:diasbled :enabled 选择启动或禁用的项
:input 选择input元素
:password 选择口令元素
:radio 选择单选按钮
:reset 选择type为reset的元素
:selected 选择被选中的option元素
:submit 选择type为submit的input元素
:text 选择type为text的input元素
4、jquery方法
(1)简单示例
$('P SPAN').addClass('SuperBig') 对包含在<p>节点中的所有<span>节点,添加一个值为SuperBig的CSS的class
$('.SuperBig').removeClass('SuperBig') 从包含css的class为SuperBig的所有节点删除这个class
$('#option').toggle() 切换ID为options的元素的可见性
$('DIV:has(INPUT[type="checkbox"]:disabled)').prepend('<i>Hey!</i>') 在含有禁用复选框的所有div元素的顶部插入<i>标记
$('#options A').css('color','red').fadeOut() 在id为options的元素中找出所有超链接标签,将它们的文本颜色设为red,通过把它们的不透明度缓慢调节到零的方式淡出视图;
(2)等待DOM
(document).ready()函数,在DOM加载就绪之后,但在媒体(图像)可用之前,才会执行jquery代码;
(3)使用jquery的css方法
addClass('myClass') :将制定的class添加到选中元素的class属性
hasClass('myClass'):如果选中的元素具有制定的class,返回true
removeClass('myClass') :从选中元素的class属性中删除制定的class名
toggleClass('myClass') :如果制定的class不存在,添加,否则删除
css('property','value'):将制定的属性和值添加到选中元素的style属性
(4)使用DOM
jQuery操作DOM,可以添加、删除和修改DOM元素,甚至可以把元素从DOM的一个部门移动到另一个部分;
常见的jQuery DOM方法:
before('new') after('new') 将new原素插入在选中元素之前,或之后
insertBefor() insertAfter() 相当于before和after,但新元素与选择器的的顺序是相反的,而且这些方法会返回新创建的元素
prepend('new') append('new') 在选中的元素内部插入new元素,最为第一个子节点,或最后一个
prependTo() appendTo() 相当于prepend和append,但new元素和选择器的顺序相反,返回新创建的元素
empty() 清空选中元素的所有子节点
remove() 从dom中移除选中元素
attr('name','value') 在选中元素上将name属性的值设置为value,如果不存在name属性,则创建它
removeAttr('name') 删除选中元素的name属性
常见的jQuery DOM导航方法
children() 获取选中元素的子节点
next() 获取紧随选中元素之后的同胞元素
prev() 获取紧邻选中元素的前一个同胞元素
parent() 返回选中元素的上一级父节点
sibilings() 返回选中元素的同胞节点
5、使用jQuery事件
jQuery库含有一个很好的时间处理系统,它支持所有底层JS事件;
$('form[action$="/DeleteSummit"]').submit(function () {
var summitName = $(':hidden', this).attr('value');
return confirm('are you sure you want to delte '+summitName+' ?');
});
6、使用jQuery视觉效果
jQuery视觉效果方法:
fadeIn() 通过增加不透明度逐渐显示选中元素(淡入)
fadeOut() 通过降低不透明度逐渐隐藏选中元素(淡出)
fadeTo() 将元素淡化到指定的不透明度
fadeToggle() 通过改变不透明度逐渐显示或隐藏元素
hide() 立即隐藏选中元素
show() 立即显示选中元素
slideDowm() 以下滑到页面的动画显示元素
slideToggle() 用滑动效果显示或隐藏元素
slideUp() 以上滑到页面的动画显示元素
toggle() 立即隐藏可见元素,立即显示隐藏元素
7、jQuery UI
引用
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />
jQuery入门知识点的更多相关文章
- 前端笔记----jquery入门知识点总结
一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...
- jquery入门知识点总结(转)
一.jquery的加载方法 $(document).ready(function(){js代码}); $(function(){js代码});(一般使用这个); 注意点1:使用jquery必须先导入函 ...
- 前端笔记----jquery入门知识点总结 (转)
http://www.cnblogs.com/cwp-bg/p/7633623.html 一.jquery的加载方法 $(document).ready(function(){js代码}); $(fu ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
随机推荐
- [NOIP2013] 提高组 洛谷P1967 货车运输
题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最多 ...
- BZOJ【1639】: [Usaco2007 Mar]Monthly Expense 月度开支
1639: [Usaco2007 Mar]Monthly Expense 月度开支 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 700 Solved: ...
- DOS的一些常用命令
原文发布时间为:2011-02-12 -- 来源于本人的百度文章 [由搬家工具导入] DOS远程桌面连接命令 mstsc /v: 192.168.1.250 /console cmd 运 ...
- DB迁移:从SQL Server 2005到MySQL
一.工具选择 依工作需要进行老产品升级,其中一项重要工作就是将SQL Server数据库改为MySQL数据库,故而在对<各种主流 SQLServer 迁移到 MySQL 工具对比>文章学习 ...
- mdf 与 mdb的对比
下面的内容从网上搜索而来,未经过本人严格验证,仅供参考. 1.问:mdb数据库能否脱离Access运行?即,没有安装Access,可以打开mdb吗? 答:可以,脱离Access运行,可以到微软的同类产 ...
- Facebook为什么使用PHP编程语言?
当日本计算机科学家松本行弘决定创造一种名叫 Ruby (这种技术支撑了 Twitter.Hulu以及其他许多现代 Web 流行网站) 的程序语言时,他是从 1966 年一部名为 Babel-17 的科 ...
- cocoapods集成三方库遇到的坑
什么都不想说直接上图 这是最近在管理三方库时遇到头疼的问题,刚开始一直怀疑是cocoapods或者ruby的版本问题但是升级到最新版还是同样的错误,后来又怀疑是资源文件的问题但是在同一时间不同地点集成 ...
- IOS7开发~NSAttributedString
从 NSBundle 中读取rtf文本文件的内容,然后用UITextView展示: NSURL *url = [[NSBundle mainBundle] URLForResource:@" ...
- eos智能合约执行流程
eos智能合约执行 1. 执行流程 controller::push_transaction() // 事务 -> transaction_context::exec() // 事务 -&g ...
- django常用第三方app大全
djangoapp 资源大全 最近经常在这个版面看到Django相关扩展的介绍,而其一个扩展写一个帖子,觉得没太必要吧. 以前整理的django资源列表,从我的wiki上转过来的. 要找django资 ...