最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步。
于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下。
初识JQuery
环境搭建:
在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.8.2版。下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文件夹Jscript中,那么,在页面的<head></head>中加入如下代码:
<script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
在页面的头部分,加入上述代码后,便完成了jQuery框架开发环境的搭建,就可以开始我们的jQuery学习了。
我在网上学习的时候,看到网站中引用JQuery是用的以下语句:<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
这个是百度的一个云平台,也可以直接引用过来用的。不过我觉着如果那天百度出问题的时候,我们的引用也会跟着出问题,所以保险起见还是老实的去官网下载JQuery吧。 如果使用百度的jquery,当用户在访问过百度后,再访问你的页面时会提高访问速度,这个是使用类似百度、又拍云、新浪、谷歌或微软加载过 jQuery的优点。
JQuery初体验:
在JavaScript中如果我们想改变所有P标签中的内容是我们需要这么写
var page_ps = doucment.getElementsByTagName("p");
for(var i=0;i<page_ps.length;i++)
{
page_ps[i].innerHtml = “abcd”;
}
在JQuery中我们这用简单的一句话就可以了
$("p").html("abcd");
$()等价于JQuery()
JQuery基础选择器
#id选择器
$("#divtest").html("aaa");
元素选择器
$("div").html("abcd")
类选择器
$(".class").html("abcd");
全部选择
$("*")
子孙元素选择器,第一个元素为父元素,第二个为子孙元素。也是说再父元素范围内,只有有label标签就会被选择比如<div><p><>label></label></p></div>也是可以选到的
$("div label")
子元素选择器,相比上面一个,子元素选择器只能选择父元素的直接后代。
$("div>label")
prve+next选择器,用来选择prve后面紧邻的1个元素
$("div+p")
prve~siblings选择器,用来选择prve后面所有同级的siblings
$("p~label")
可以同时精确选择多个元素
$(".class,#id,p")
JQuery过滤性选择器
:first选择第一个子元素
$("div:first")
:eq(index)选择第N个子元素 index从0开始
$("li:eq(3)")
:contains(xxxx)选择文本内容包含xxxx的的元素
$("li:contains(xxx)")
:has(selector)选择包含的有selector的元素,selector可以有单引号,也没有。
$("li:has(p)")
:hidden选择隐藏的元素,例为选择不可以见的P元素
$("p:hidden")
:visible选择display不为none的所有元素
$("li:visible")
[attribute=value]/[attribute!=value]属性选择器,选择属性为/不为value的元素
$("li[title=xxx]") $("li[title!=xxx]")
[attribute*=value]属性选择器,选择包含有value的元素,下面代码选择就是title为水果、苹果、人参果的li元素
<body>
<li title="水果">11</li>
<li title="苹果">11</li>
<li title="人参果">11</li>
<li title="蔬菜">11</li>
<script>
$("li[title*=果]")
</script>
</body>
:first-child选择其父元素的第一个子元素的集合。需要注意的是如下面的代码,第一个ol中的第一个li会被选取,但是第二个ol中的第一个li却不会被选择,也是就说该方法选择的元素必须是在其父元素的第一个位置上,而不是在其父元素中元素li排序的第一个位置。(讲的可能有乱,最好自己动手实践下,相信一眼就能明白了。)
:last-child跟:first-child方法一样只不过选取的是最有一个元素而已。
<body>
<h3>改变每个"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>芹菜</li>
<li>芹菜</li>
<li>芹菜</li>
<li>芹菜</li>
</ol>
<ol>
<p>1111</p>
<li>橘子</li>
<li>橘子</li>
<li>橘子</li>
<li>橘子</li>
</ol>
</body>
<script type="text/javascript"> $("li:first-child").css("background-color", "green"); </script>
表单选择器
表单选择器前面注意加空格,否则无效
:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
$("form :input")
:text获取单行文本输入框元素。
$("form :text")
:password获取密码输入文本框元素。
$("fomr :password")
:radio获取表单中的单选按钮
$("form :radio")
:check获取表单中复选按钮
$("form :checkbox")
:submit提交按钮选择器,IE中button就是button但是其他浏览器不是,所有在使用:submit的时候会连button一起选中,在使用:submit的时候建议使用input:submit的写法
$("form input:submit")
:image图像获取器,这个只能获取input的type=image的图像不能获取<img>标签的图像
$("form :image")
:button按钮选择器,或者input type=button 和<button>两类的按钮。
$("form :button")
:checked获取单选、复选框的选中元素
$("form :checked")
:selec获取<select>下拉列表的处于选中状态的option选项
$("form :selected")
操作DOM元素
attr方法的作用是设置或者返回元素的属性,其中attr(属性名)
格式是获取元素属性名的值,attr(属性名,属性值)
格式则是设置元素属性名的值。
$("div").attr('text')
$("div").attr('text','xxx')
html()/text()两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。html()能获取原文的格式,而text只能获取文本。var $a = <i>adc</i> 在使用html添加$a的时候是斜体的abc,但是text添加的时候则是<i>abc</i>
addClass() css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
removeClass(name) removeAttr(class) 移除元素的属性和类name/class 加引号
append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数
(content)appendTo(selector)方法也可以向指定的元素内插入内容.
使用before()
和after()
方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:
$(selector).before(content)
和$(selector).after(content)
其中参数content表示插入的内容,该内容可以是元素或HTML字符串。
调用clone()
方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
replaceWith()
和replaceAll()
方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:
$(selector).replaceWith(content)
和$(content).replaceAll(selector)
参数selector为被替换的元素,content为替换的内容。
wrap()
和wrapInner()
方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:
$(selector).wrap(wrapper)
和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
使用each()
方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:
$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
remove()
方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()
方法则只删除所选元素的子元素.(使用remove删除标签本身,使用empty只是清空该标签,该标签会保留)
JQuery事件与应用
ready()
事件类似于onLoad()
事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()
可以写多个,按顺序执行。此外,下列写法是相等的:
$(document).ready(function(){})
等价于$(function(){});
bind()
方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:
$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
unbind()方法可以移除元素已绑定的事件,它的调用格式如下:
$(selector).unbind(event,fun)
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。
hover()
方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果,调用格式如下:
$(selector).hover(over,out);
over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
toggle()方法用来切换显示和隐藏。同事可以设置两个参数,一个是speed,还有一个回调函数
$(selector).toggle()
one()
方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:
$(selector).one(event,[data],fun)
参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
$(selector).trigger(event,eventObj,param1,param2,...)
event必需。规定指定元素上要触发的事件。可以是自定义事件,或者任何标准事件。
param1,param2,...可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发。
$('#text1').focus(
function(){
$('div').html('哈哈哈哈,获得焦点了。');
})
当一个元素的值发生变化时,将会触发change
事件,例如在选择下拉列表框中的选项时,就会触change
事件。
$('select').change(
function(){
$(this).css('background-color','red');
})
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用 off() 方法。
提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。
关于这个方法的更多资料,比如以前使用bind现在如何替换成on,可以参考这里:http://www.w3cschool.cc/jquery/event-on.html
JQuery基础总结上的更多相关文章
-
jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
-
jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
-
jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
-
【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
-
【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
-
jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
-
使用jquery插件uploadify上传文件的方法与疑问
我是学生一枚,专业也不是计算机,但又要用到很多相关技术,所以在技术基础不牢靠的情况下,硬着头皮在做.最近在做一个小项目需要上传图片,而且是需要用ajax的方式.但是利用jquery的ajax方法总会有 ...
-
jQuery基础---Ajax基础教程(二)
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
-
jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
随机推荐
-
MyBatis传入参数为集合、数组SQL写法
参考:http://blog.csdn.net/small____fish/article/details/8029030 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合 ...
-
ASP.Net中无刷新执行Session身份验证
在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的 ...
-
MonoBehaviour
所有的Unity脚本都继承自MonoBehaviour这个类,它没有Main函数入口,采用了事件触发的模式,根据不同的事件响应不同的函数. void Start(): void Update():每一 ...
-
poj 2724 二分图最大匹配
题意: 会给出M个串,我们要做的就是将这M个串给清除了.对于任意两个串,若二进制形式只有一位不一样,那么这两个串可以在一次操作消除,否则每个操作只能消除一个串. 3 3 *01 100 011 可以代 ...
-
[转]PHP5.5安装PHPRedis扩展
phpredis是个人觉得最好的一个php-redis客户端,因为其提供的function与redis的命令基本一致,降低的了学习成本,同时功能也很全面. 一.linux安装方法 phpredis下载 ...
-
[转]PHP错误日志
对 于PHP开发者来说,一旦某个产品投入使用,应该立即将display_errors选项关闭,以免因为这些错误所透露的路径.数据库连接.数据表等信息 而遭到黑客攻击.但是,任何一个产品在投入使用后,都 ...
-
vim file save as
the command of vim to save as the file :w new_file_name
-
磁盘阵列RAID
磁盘阵列RAID 年提出的.RAID名为独立 ...
-
基于HTML5 的WebSql本地设备数据库
HTML5 的 Web SQL Database 用本地和会话存储实现简单的对象持久化,对繁琐的关系数据进行处理. 在 W3C 的 Web SQL Database 规范中(参照 介绍)有这样的描述: ...
-
C++11 左值、右值、右值引用
左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值.在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值(将亡值或纯右值).举个 ...