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 ...
随机推荐
- QT笔记（1）--QT编程环境搭建
一.QT简介 Qt 是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器.Qt是面向对象的框架,使用特殊 ...
- DWZ在APS.NET WebForm中的使用（一）
1.前言 在最近的项目开发中,使用到了前端框架DWZ.DWZ是一款较为优秀的后台管理界面框架,但官方发布的文档确实令人汗颜,简单几页了事,有点对自己的产品不负责任了.同时感谢网友石头的热心帮助,在我这 ...
- 统计字符 比如aaabbcca----3a2b1c1a
package Demo; import java.util.Scanner; /** * Created by chengpeng on 16/11/3. */ /* idea command+al ...
- js获取当期日期累加天数
本文是转载的,,忘记出处了,我用上了,也给大家分享一下 一.日期减去天数等于第二个日期 function cc(dd,dadd)...{//可以加上错误处理var a = new Date(dd)a ...
- IE8的项目在IE11下 一些功能无法实现的解决方案
最近改了一些IE11下一些功能无法实现的项目,发现了有一些IE8下的方法 ,在IE11下被取消或者替代了,如下: 1.JavaScript 运行时错误: 对象不支持“attachEvent”属性或方法 ...
- js 去掉字符串最后一个字符
var str = str.substring(0,str.length-1); alert(str); 注:length 需小写.
- Fragment之一：Fragment入门
参考自张泽华视频 Fragment是自Android3.0后引入的特性,主要用于在不同的屏幕尺寸中展现不同的内容. Fragment必须被嵌入Activity中使用,总是作为Activity的组成部分 ...
- Servlet Examples
Servlet Examples Servlet Examples 1.Hello World output: code: 1.import java.io.*;2.import javax.serv ...
- Android的线程和线程池
---恢复内容开始--- 一.Android线程的形态 (一)AsyncTask解析 AysncTask简介:①.实现上封装了Thread和Handler ②.不适合进行特别耗时的后台任务 Ays ...
- YII学习,初体验 ,对YII的一些理解.
先说点没用的: 不会选择,选择后不坚持,不断的选择.这是人生中的一个死循环,前两一直迷茫.觉得自己前进方向很不明朗.想去学的东西有很多.想学好YII,想学PYTHON 想学学hadoop什么的,又想研 ...