本文总结了jQuery的基础知识，包括其作为JavaScript库的角色，简化编程的特点，以及选择元素、操作HTML、CSS、事件、动画、AJAX等功能。介绍了如何向页面添加jQuery库，如使用Google或Microsoft的CDN。此外，还详细阐述了jQuery的语法、文档就绪函数、属性操作如attr、prop、addClass、removeClass和toggleClass，以及html、text和val方法的使用。文章适合对HTML、CSS和JavaScript有一定了解的学习者。
jQuery基础知识总结
- jQuery 简介：
- 什么是jQuery:
-jQuery是一个JavaScript函数库，且极大地简化了JavaScript编程；
-jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
-基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
-在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：
- HTML
- CSS
- JavaScript
-jQuery 库可以通过一行简单的标记被添加到网页中。
- jQuery特性：
jQuery包含以下特性：
-HTML元素选取
-HTML元素操作
-CSS操作
-HTML事件函数
-JavaScript特效和动画
-HTML DOM遍历和修改
-AJAX
-Utilites
除此之外jQuery还提供了大量插件
- 向页面添加jQuery库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
注意，<script> 标签应该位于页面的 <head> 部分。
- 库的替代：
Google 和 Microsoft 对 jQuery 的支持都很好。
如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
- jQuery语法
- 基础语法：
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
$(selsctor).action()
$:定义jQuery
Selector：“查询”和“查找”HTML元素
action（）：执行对元素的操作
eg：
$(this).hide()隐藏当前的HTML元素
$(“p”).hide()隐藏所有<p>
$(“.test”).hide()隐藏所有class=”test”的元素
$(“#test”).hide()隐藏所有id=”test”元素
- 文档就绪函数：
-所有jQuery函数位于一个document ready函数中这是为了防止文档加载（就绪）之前运行jQuery代码
-如果在文档没有完全加载之前就运行函数，操作可能失败。
eg：
-试图隐藏一个不存在的元素
-获得未完全加载的图像的大小
- 属性
- attr(name|pro|key,val|fn)属性
设置或返回被选元素的属性值。
-参数说明：
name 属性名称、pro 作为属性的“名/值对”对象、key,val 属性名，属性值、 key,function(index,attr) 属性名，返回属性值的函数第一个参数为当前元素的索引值，第二个参数为原先的属性值
例：返回文档中所有图像的src属性值
$(“img”).attr(“src”);
为所有图像设置src和alt属性
$(“img”).attr({src:”......”,alt:”......”});
- removeAttr(name)
从匹配的元素中删除一个属性
例：移除box 中的id属性
box.removeAttribute("id");
- prop()
获取在匹配的元素集中的第一个元素的属性值
例：禁用页面上所有的复选框
$(“input[type=’checkbox’]”).prop({
disabled:true
});
- removeProp()
用来删除由prop()设置的属性集
- addClass(class|fn)
为每个匹配的元素添加指定的类名
一个或多个要添加到元素的CSS类名，请用空格分开
函数必须返回一个或多个空格分隔的class名，接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
例：给id为box元素添加wrapper类
$(“#box”).addClass(“wrapper”);
- removeClass()
从所有匹配的元素中删除全部或指定的类
一个或多个要删除到元素的CSS类名，请用空格分开
函数必须返回一个或多个空格分隔的class名，接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
例：给id为box元素删除wrapper类
$(“#box”).removeClass(“wrapper”);
- toggleClass()
如果存在（不存在）就删除（添加）一个类
- html()
获得第一个匹配元素的html内容，这个函数不能用于XML文档，但可以用于XHTML文档
在一个HTML文档中，我们可以使用.html()方法来获取任意一个元素的内容，如果选择器匹配多余一个的元素，那么只有第一个匹配的HTML内容会被获取
$(element).html()获取element元素的HTML内容
$(element).html(“htmlString”)为毎一个匹配元素添加html内容
注意：$(element).html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
- text（）
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代或设置匹配元素集合中每个元素的文本内容为指定的文本内容
$(element).text()获取element元素的文本内容
$(element).text(“textString”)用于设置匹配元素的内容的文本
- html()与text()的区别
-html()与text()的方法操作一样，只是在具体针对处理对象不同
-html()处理的是元素内容，text()处理的是文本内容
-html()只能使用在HTML文档中，text()在XML和HTML中都能使用。如果处理的对象只有一个子文本节点，那么html()处理的结果与text()一样
注意：火狐浏览器不支持innerText()属性，用了类似的textContent属性
text()方法综合了2个属性的支持，所以可兼容所有的浏览器。
11.val()
获得匹配元素的当前值
$(ele).val()方法主要是用于处理表单元素的值，比如input,select和textarea
JavaScript中的value属性
$(ele).val()获取匹配的元素集合中的第一个元素的当前值
$(ele).val(value)设置匹配的元素集合中每个元素的值
通过$(ele).val()处理select元素，当没有选择项被选择时，返回null，$(ele).vel()方法多用来设置表单的字段的值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中，$(ele).val()方法返回一个数组，这个数组包含每个选中的值。
JQuery选择器这一部分我单独写在另外一篇文章有需要的可以去看看。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
