强大的JQuery(一)--基础篇
JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮。
学好了jquery,我们相当于站长了巨人的肩膀上。
我将分三篇博客为大家介绍jquery,本篇博客将主要介绍jquery的基本语法、智能感知、选择器和事件。
一、基本语法
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head> <body>
<button type="button">Click me</button>
</body> </html>
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
——美元符号定义 jQuery
——选择符(selector)“查询”和“查找” HTML 元素
—— jQuery 的 action() 执行对元素的操作
二、jquery智能感知
所谓”工欲善其事必先利其器“,我们在具体介绍jquery之前先介绍一个实用的小技巧--智能感知,也叫智能代码提示。
我们在以往编程中都会有智能代码提示,这一点对于基础知识掌握的还不熟练的初学者来说是一个非常必要的功能,可是无论是vs还是dreamweaer中都没有智能代码提示。
那么我们该怎么办呢?其实在vs中是有智能感知的,我们来看看是怎么做的。
1、我们新建一个网站,会发现它会自动生成一个Scripts的文件夹,里面有三个文件。
2、在html页引用vsdoc版的jquery库
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
3、此时再编写jquery代码看看是不是有智能提示了?
4、在独立的.js文件中启用脚本智能感知
以上方法只适用于html页中的jquery编写,那么在独立文件中是如何实现呢?
也同样非常简单,只需要在.js文件开头添入这样一段。
///<reference path="jquery-1.4.1-vsdoc.js" />
5、注意:示例中我们引入了"jquery-1.4.1-vsdoc.js"文件. 如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下,。
我们必须要使用"min"版本的jquery库文件
三、jquery选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
1、jquery元素选择器
jquery使用css选择器来选取HTML元素。
例如:
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2、jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
例如:
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
3、jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
例如:
<span style="font-size:18px;"><span style="white-space:pre"> </span>$("p").css("background-color","red");</span>
四、jquery事件
jQuery 事件处理方法是 jQuery 中的核心函数。jquery的事件函数使用和javascript、c#等语言很像。
在jquery帮助文件中可以很容易查到jquery的全部事件用法。这里写一下常见的。
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
以上就是jquery的基础知识,从上面的内容我们就可以看出,jquery比javascript确实强大了不少。下一篇博客我将为大家介绍jquery的动画效果,继续与大家感知query的强大之处。
强大的JQuery(一)--基础篇的更多相关文章
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- 强大的JQuery(三)--操作html与遍历
前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所 ...
- 强大的JQuery(二)--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- ABP框架实践基础篇之开发UI层
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- SQL Server调优系列基础篇(常用运算符总结——三种物理连接方式剖析)
前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握. 通过本篇可以了解我们平常所写的T-SQL语句,在SQL ...
- SQL Server调优系列基础篇(并行运算总结篇二)
前言 上一篇文章我们介绍了查看查询计划的并行运行方式. 本篇我们接着分析SQL Server的并行运算. 闲言少叙,直接进入本篇的正题. 技术准备 同前几篇一样,基于SQL Server2008R2版 ...
- SQL Server调优系列基础篇(子查询运算总结)
前言 前面我们的几篇文章介绍了一系列关于运算符的介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符.有兴 ...
随机推荐
- POJ 3659 Cell Phone Network (树dp)
题目链接:http://poj.org/problem?id=3659 给你一个树形图,一个点可以覆盖他周围连接的点,让你用最少的点覆盖所有的点. dp[i][0]表示用i点来覆盖,dp[i][1]表 ...
- HDU3466Proud Merchants(贪心&背包)
http://acm.hdu.edu.cn/showproblem.php?pid=3466 题目大意是说n个物品每个物品的花费是p,但是如果你现在的钱少于q就买不了这个物品,每个物品的价值是v,求有 ...
- POJ1185状态压缩DP
难得的中文题. POJ1185http://poj.org/problem?id=1185 方法就是用DP[i][r][p]表示第i行状态为r,第i-1行状态是p时的最多个数.而这里p受到r的限制,而 ...
- MFC 构建、消亡 顺序 (二)--多文档 (MDI)
MFC 构建.消亡 顺序 (二)--多文档 (MDI) by:http://www.cnblogs.com/vranger/ (一)MDI 生成顺序 (二)打开文档-“Open” (三)新建文档-“N ...
- 如何在我们项目中利用开源的图表(js chart)
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...
- 移动端翻页插件dropload.js(支持Zepto和jQuery)
一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...
- Java利用Math.random()方法随机生成A-Z的字符
package reverse; import java.text.DecimalFormat; public class Reverse { public static void main(Stri ...
- Android - Facebook KeyHash 設定
转自:http://www.dotblogs.com.tw/newmonkey48/archive/2014/04/17/144779.aspx App要使用Facebook 分享時,設要在Faceb ...
- Uva592 Island of Logic
题意:神人鬼三个种族,神只说真话,鬼只说假话,人白天说真话,晚上说假话.根据对话内容区分种族和白天黑夜. 最多有A, B, C, D, E五个人 算法:枚举A, B, C, D, E的种族情况和 ...
- linux下登入mysql和加压zip文件
1.类似于window中cmd登入一样 : mysql -u root -p ----> 回车 ---> 输入密码 就可以了 2. unzip abc.zip 直接进行解压 ...