前言:
感谢大家阅读,小编的博客风格是针对每个主题有两个模块并至少分为两篇博客,请先阅读模块一:问题中学习(点击阅读,请点这里);模块二:实践中应用。模块一问题中学习其实并非是理论篇,而是更倾向于思考,自问自答,抛出疑惑,解决问题。
那么所以在读这篇博客之前呢,建议先阅读模块一,在经过问题中学习这一过程后,会搞清楚很多问题,有一个宏观的把控,也能与之前学的东西联系起来再阅读这篇博客当是易如反掌啦~,希望这系列博客能放大家有所收获——文章最后有完整实例-供大家学习
一、基础使用
如果需要使用jQuery,您需要下载jQuery库,(这核心首先要区分jquer和jQuery库,如不知请阅读上篇博客:问题中学习(点击阅读))然后这个库是一个JavaScript文件,需要使用HTML的标签来引用它。
1、jQuery代码放在哪里?怎么放(用)?
方式1:jquer函数代码直接放在HTML文件中直接使用、示例如下:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//具体jQuery代码
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
方式2:jQuery函数代码放在独立的.js文件中,在HTML文件中通过src属性来引 用文件、示例如下:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
☆ 以上两种方式的共同点:请注意<script>标签应位于页面的<head>部分。
2、jQuery使用语法规则?
1)文档就绪事件:所有的jQuery函数必须位于document ready函数中
$(document).ready(function(){
// 开始写 jQuery 代码...
});
为什么呢?这是为了防止文档在为完全加载就绪之前运行jQuery代码,这也就是说明必须在DOM加载完成后才可以对DOM进行操作。在文档就绪之后,就可以对DOM进行操作了,但是页面中这么多DOM,你怎么选择你要对哪个DOM进行操作呢?接下来jQuery选择器就要出场了。
2)jQuery选择器:jQuery选择器允许您对HTML元素或单个元素进行操作。jQuery中所有选择器都以美元符号开头:$()。
i)元素选择器——基于元素名选取元素
//在页面中选取所有<p>元素
$("p")
ii) #id选择器——通过HTML元素的id属性选取指定的元素
//选取id为test的元素
$("#test")
iii) .class选择器——通过指定的class查找元素
//选取class命为test的元素
$(".test")
二、jQuery事件:jQuery其实本就是为事件处理特别设计的
那什么是事件?常见DOM事件有哪写?
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|
三、jQuery效果方法:
隐藏显示:hide() show() toggle()
淡入淡出:fadein() fadeout() fadeToggle() fadeTo()
滑动:slideDown() slideUp() slideToggle()
动画:animate() stop()
//这里只给出一个效果实例,其他都类同
$("#p").slideUp()
四、jQuery的DOM操作方法:
获得接受/设置内容:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr()-获取属性
//给出一个操作方法实例,其他都类同
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
添加/删除元素:
添加:
i. Append()-在被选元素的结尾插入内容
ii. Prepend()-在被选元素的开头插入内容
iii. After()-在被选元素之后插入内容
iv. Before()-在备选元素之前插入内容
//给<p>元素的结尾插入内容
$("p").append("追加文本");
删除:
i. Remove()-删除备选元素(及其子元素)
ii.Empty()-从备选元素中删除子元素
//删除id为div1的元素
$("#div1").remove();
获取并设置css类:
addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作
//增加css类important之后,选择器就选择了4个css类了
$("button").click(function(){
$("h1,h2,p").addClass("blue"); $("div").addClass("important");
});
综合※、jQuery事件和方法与选择器的结合使用?
到这里就很关键了,首先你是否明白事件与方法的区别?去搞清楚这两个概念再来接着看OK?那我现在用一句话来总结下:选择器所选择的元素的效果是通过事件调用方法做出来的!现在能理清这三者的关系吗?接下来跟进个例子来理解下。
//页面中对<p>元素指定一个点击事件
$("p").click(function(){
//事件触发后执行的方法代码!!
)};
小结:
文章到这里,大家应该对jQuery有了相对比较全面的了解了吧,希望大家能get到我文章的重点。也许重点不在于jQuery你学到了什么(当然这也是比较重要的哈,嘿嘿(*^▽^*))。多说不如感受,啊哈哈O(∩_∩)O哈哈~。下面即是可以运行出来的实例,在真实情境下的体会会让你看完这两篇之后的收获翻倍的。可以运行下,促进大家的理解吸收。jQuery 实例 | http://www.runoob.com/jquery/jquery-examples.html