JQuery(一)——初步总结
JQuery其实早就看过相关的视频了，但是由于当时查的资料太少，理解的不够深刻，所以没有进行总结，这次回过头来又学习了，心里感觉理解了很多，因为BS的其它知识基本学习完了，而且有了一定程度的理解。相互促进学习的都是。
一，简介：JQuery是一个优秀的Javascript框架，是轻量级的js库，兼容了各种浏览器（IE 6.0+, FF 1.5+,Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTMLdocuments,events，实现动画效果，并且方便的为网站提供AJAX交互。核心理念是write less,do more(写得更少,做得更多) jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM 遍历和修改，AJAX等。而且大大优于JavaScript的编程。
二，引入：
使用JQuery，首先需要我们到指定网站下载http://jquery.com/download/#Download_jQuery，然后向我们的页面中添加JQuery库：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"><head>
<script type="text/javascript" src="jquery.js"></script>
</head>
</span>
然后我们看一个最基础的JQuery实例：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
//当页面加载完毕时要执行的函数
$(document).ready(function(){
//单击p标签时要执行的函数
$("button").click(function(){
//隐藏p标签
$("p").hide();
});
});
</script>
</head> <body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
</span>
三，JQuery语法：
通过 jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。这其实也就是对JS进行封装，来实现这些功能。基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery的 action()执行对元素的操作
例如：
$(this).hide() -隐藏当前元素
$("p").hide() -隐藏所有段落
$(".test").hide() -隐藏所有 class="test"的所有元素
$("#test").hide() -隐藏所有 id="test"的元素
四，JQuery选择器：其实就是找到我们想要操作的内容，有下边几种情况：
1，元素选择器：
$("p")选取 <p>元素。
$("p.intro")选取所有 class="intro"的 <p>元素。
$("p#demo")选取所有 id="demo"的 <p>元素。
2，属性选择器：
$("[href]")选取所有带有 href属性的元素。
$("[href='#']")选取所有带有 href值等于 "#"的元素。
$("[href!='#']")选取所有带有 href值不等于 "#"的元素。
$("[href$='.jpg']")选取所有 href值以 ".jpg"结尾的元素。
3，CSS选择器：这里举一个例子：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//将其CSS改为背景为红色
$("p").css("background-color","red");
});
});
</script>
</head> <body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body> </html>
</span>
五，JQuery事件：跟我们JS里边的，c#,java等里边的都特别像，这里看一下几个常用的，来看一下他的形式：
|
Event函数 |
绑定函数至 |
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
综上为JQuery一些基础的知识总结，更够比JS更加方便的操作HTML中的内容，更为简单。在下边的一些博客会通过一些具体的小例子，来学习一些具体常用的JQuery知识。但是更重要的是需要我们会查JQuery的API文档，上边写的特别全，只要在我们想要用某个方法，属性，事件的时候我们能够很快的查询出来也是可以的。Jquery的学习中！
JQuery(一)——初步总结的更多相关文章
- 沉淀，再出发：jQuery的初步了解和入门
沉淀,再出发:jQuery的初步了解和入门 一.前言 对于后端开发者来说,是不是真的不需要了解前端的开发经过和相关技术,从我个人的角度来说,我觉得如果不了解或者接触很少,极有可能造成开发的时候 ...
- day 54 jQuery 的初步基础
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- jQuery入门第一天-（一个菜鸟的不正经日常）
jQuery的初步认识 菜鸟Q1:什么是jQuery? jQuery就是一个JavaScript函数库,没什么 特别的. 菜鸟Q2:jQuery能做什么?jQuery是做什么的? jQuery本身就是 ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Javascript高级面试
原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
- jQuery验证插件使用初步
validate是一款优秀的表单验证插件,其初步使用方法如下: (1)前台页面代码: <form id="form1" runat="server"> ...
- 第二十篇 jQuery 初步学习2
jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...
- 第十九篇 jQuery初步学习
jQuery 初步学习 jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
随机推荐
- javascript 判断系统设备
<script> function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.pl ...
- 【指数型母函数+非递归快速幂】【HDU2065】"红色病毒"问题
大一上学完数分上后终于可以搞懂指数型母函数了.. 需要一点关于泰勒级数的高数知识 题目在此: "红色病毒"问题 Time Limit: 1000/1000 MS (Java/Oth ...
- android 硬件解码学习
FileInputStream in = new FileInputStream("/sdcard/sample.ts"); String mimeType = "vid ...
- SCII码表 键盘常用ASCII码
ASCII码对照表 在Web开发时,如下的ASCII码只要加上&#和;就可以变成Web可以辨认的字符了在处理特殊字符的时候特别有用,如:' 单引号在数据库查询的时候是杀手,但是如果转换成' ...
- function overloading/ declare function
Declare a function To declare a function without identifying the argument list, you can do it in thi ...
- BullseyeCoverage：代码覆盖率。
1,安装和使用步骤 阅读READER文档.并安装(非常简单,README中有详细指令说明) 配置环境:同样可以阅读相关文档. 增加PATH环境变量.需要注意,此路径需要增加在PATH的最前列.即< ...
- 模拟HTTP请求：Request Maker
摘要 : Request Maker是一款可以模拟HTTP请求的谷歌浏览器插件. Request Maker的开发背景 现在由于restful式的web api的兴起,越来越多的开发者习惯使用URL来 ...
- Django学习(四) Django提供的后台管理系统以及如何定义URL路由
一旦你建立了模型Models,那么Django就可以为你创建一个专业的,可以提供给生成用的后台管理站点.这个站点可以提供给有权限的人进行已有模型Models数据的增删改查. 将新建的模型Models是 ...
- Oracle EBS-SQL (BOM-16):检查多层BOM.sql
select rownum seq_num, lpad(to_char(level), decode(level, 1, 1, level + 1), '.') bom_level, bbm.ASSE ...
- shell基础——字符串连接
#!/bin/sh str1="hello" str2="world" echo str1=$str1, str2=$str2 strconn1=$str1$s ...