【jquery】——之实践中应用

来源：互联网发布：电信是什么网络制式编辑：程序博客网时间：2024/05/21 09:02

前言：

感谢大家阅读，小编的博客风格是针对每个主题有两个模块并至少分为两篇博客，请先阅读模块一：问题中学习（点击阅读，请点这里）；模块二：实践中应用。模块一问题中学习其实并非是理论篇，而是更倾向于思考，自问自答，抛出疑惑，解决问题。

那么所以在读这篇博客之前呢，建议先阅读模块一，在经过问题中学习这一过程后，会搞清楚很多问题，有一个宏观的把控，也能与之前学的东西联系起来再阅读这篇博客当是易如反掌啦~，希望这系列博客能放大家有所收获——文章最后有完整实例-供大家学习

一、基础使用

如果需要使用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事件有哪写？

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

三、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

阅读全文

1 1