JQuery 基本知识
写在前面
如果十八般武艺都融会贯通，如果什么兵器你都耍得有模有样，那么这篇博文你大可以跳过了。只是在忘记的时候，可以拿出来温习温习。
回到顶部
v基本概念
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
简单点一句话概括： Jquery不是一门独立的语言，是javascript的一个类库或框架
回到顶部
v各种选择器
1.基本选择器：
$("div")标记选择器
$(".div")类别选择器
$("#div")id选择器
$("*")通用选择器
$("div,.nav,#box")组合选择器
2.层次选择器：
$("div p")后代选择器 div里面所有的p
$("div>p")子选择器 div里面的下一级p
$("div+p")兄弟选择器 下一个兄弟元素，div后面的p
$("div~p")div后面所有的兄弟元素，div后面所有的p
3.简单选择器：
$("div:first")找到第一个div
$("div:last")找到最后一个div
$("div:eq(index)")找到索引位置的div
4.内容选择器：
$("div:contains(文本内容)")找到包含文本内容的div
5.可见性选择器：
$("div:visible")找到所有显示的div元素
$("div:hidden")找到所有隐藏的div元素
6.属性选择器：
$("div[align]")具有align这个属性的div
$("div[align=right]")具有align这个属性且属性值是right的div
7.表单选择器：
$("div:input")找到div内所有的表单元素
$("div:checkbox")找到div内所有的复选框
$("div:radio")找到div内所有的表单选框
$("div:password")找到div内所有的密码框
$("div:text")找到div内所有的文本框
$("div:selected")找到div内所有被选中的下拉列表框
回到顶部
v过滤选择
first()找到第一个元素
last()找到最后一个元素
eq()找到索引值的元素
filter("条件")筛选
find()查找后代元素 =$("div p")
next()下一个兄弟元素 =$("div+p")
nextAll()后面所有的兄弟元素 =$("div~p")
prev()前一个元素
parent()父元素
not()除了...之外的
回到顶部
vJquery操作
1.操作属性：
对象.attr("属性名") 获取属性的值
对象.attr("属性名","属性值") 设置属性的值 ps:值得一提的是对于部分(radion等)表单元素设置属性值使用prop
对象.removeAttr("属性名") 移除属性
2.操作样式：
addClass()添加样式
removeClass()删除样式
toggleClass()切换样式
对象.css({"属性名":"属性值","属性名":"属性值"})
3.操作内容：
html()获取/改变非表单元素的其他标签的内容
text()获取/改变非表单元素的其他标签的文本内容
val（）获取/改变表单元素的value值
4.操作宽高：
width()获取/改变元素的宽
height()获取/改变元素的高
5.Jquery事件：
js的事件去掉on就是jquery的事件
回到顶部
vJquery DOM
1.DOM操作：
$("父对象").append("子对象")在父对象里向后追加子对象
$("父对象").prepend("子对象")在父对象里向前追加子对象
$("父对象").before("子对象")在父对象前面添加子对象
$("父对象").after("子对象")在父对象后面添加子对象
回到顶部
vJquery 其它
1.位置：
length() 获取元素的个数/长度
size()获取元素的个数/长度
index()获取同辈元素的索引位置，返回值是数值，从0开始
get()获取索引位置的元素，将jq的对象转成js对象
回到顶部
v博客总结
关于jquery 入门教程就写到这里，只是为了希望帮助到一些入门的朋友，或者一些像我这样健忘的人朋友恢复记忆。
v阅读目录
v写在前面
v基本概念
v函数介绍
v浏览器对象BOM
vDOM
v正则表达式
v博客总结
v博客前言
子曰：“温故而知新，可以为师矣。”孔子说：“温习旧知识从而得知新的理解与体会，凭借这一点就可以成为老师了。“ 尤其是咱们搞程序的人，不管是不是全栈工程师，都是集十八般武艺于一身。不过有时候有些知识如果有很久没用了的话，就会忘记，甚至是忘的你一点都想不起来，尤其是一些基础的东西。所以我才打算写个"温故而知新"的系列博文出来，一来是这些基础的东西我比较健忘，以后方便自己翻阅；二来是希望可以帮助到一些刚入门的朋友。这个系列记录的所有知识点都是最最最(重要的事情说三遍)基础的知识。大部分都是我学习的时候所积累的笔记。
温故而知新系列都是一些基础知识，大神可以直接跳过。
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：
1 $(document)//选择整个文档对象
2 $('#myId')//选择ID为myId的网页元素
3 $('div.myClass')//选择class为myClass的div元素
4 $('input[name=first]')//选择name属性等于first的input元素
也可以是jQuery特有的表达式：
复制代码
1 $('a:first')//选择网页中第一个a元素
2 $('tr:odd')//选择表格的奇数行
3 $('#myForm :input')//选择表单中的input元素
4 $('div:visible') //选择可见的div元素
5 $('div:gt(2)')//选择所有的div元素，除了前三个
6 $('div:animated')//选择当前处于动画状态的div元素
复制代码
二、改变结果集
如果选中多个元素，jQuery提供过滤器，可以缩小结果集：
1 $('div').has('p'); //选择包含p元素的div元素
2 $('div').not('.myClass'); //选择class不等于myClass的div元素
3 $('div').filter('.myClass'); //选择class等于myClass的div元素
4 $('div').first(); //选择第1个div元素
5 $('div').eq(5); //选择第6个div元素
有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：
1 $('div').next('p'); //选择div元素后面的第一个p元素
2 $('div').parent(); //选择div元素的父元素
3 $('div').closest('form'); //选择离div最近的那个form父元素
4 $('div').children(); //选择div的所有子元素
5 $('div').siblings(); //选择div的同级元素
三、链式操作
选中网页元素以后，就可以对它进行某种操作。
jQuery允许将所有操作连接在一起，以链条的形式写出来，比如：
1 $('div').find('h3').eq(2).html('Hello');
我们可以这样拆封开来，就是下面这样：
1 $('div')//找到div元素
2 .find('h3')//选择其中的h3元素
3 .eq(2)//选择第3个h3元素
4 .html('Hello'); //将它的内容改为Hello
这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
jQuery还提供了.end()方法，使得结果集可以后退一步：
复制代码
1 $('div')
2 .find('h3')
3 .eq(2)
4 .html('Hello')
5 .end()//退回到选中所有的h3元素的那一步
6 .eq(0)//选中第一个h3元素
7 .html('World'); //将它的内容改为World
复制代码
四、元素的操作：取值和赋值
操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。
jQuery使用同一个函数，来完成取值(getter)和赋值(setter)。到底是取值还是赋值，由函数的参数决定。
复制代码
$('h1').html(); //html()没有参数，表示取出h1的值 $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数如下：
.html()
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val()
取出或设置html内容 取出某个表单元素的值
复制代码
取出或设置html内容 取出某个表单元素的值
需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值;取值的时候，则是只取出第一个元素的值(.text()例外，它取出所有元素的text内容)。
五、元素的操作：移动
如果要移动选中的元素，有两种方法：一种是直接移动该元素，另一种是移动其他元素，使得目标元素达到我们想要的位置。
假定我们选中了一个div元素，需要把它移动到p元素后面。
第一种方法是使用.insertAfter()，把div元素移动p元素后面：
$('div').insertAfter('p');
第二种方法是使用.after()，把p元素加到div元素前面：
$('p').after('div');
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对
1 .insertAfter()和.after()：在现存元素的外部，从后面插入元素
2 .insertBefore()和.before()：在现存元素的外部，从前面插入元素
3 .appendTo()和.append()：在现存元素的内部，从后面插入元素
4 .prependTo()和.prepend()
5 ：在现存元素的内部，从前面插入元素
六、元素的操作：复制、删除和创建
复制元素使用.clone()。
删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()。
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
1 $('
Hello
');2 $('
3 $('ul').append('
七、工具方法
除了对选中的元素进行操作以外，jQuery还提供一些工具方法(utility)，不必选中元素，就可以直接使用。
如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例(即选中元素)后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。
常用的工具方法有以下几种：
复制代码
1 $.trim() 去除字符串两端的空格。
2 $.each() 遍历一个数组或对象。
3 $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
4 $.grep() 返回数组中符合某种标准的元素。
5 $.extend() 将多个对象，合并到第一个对象。
6 $.makeArray() 将对象转化为数组。
7 $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
8 $.isArray() 判断某个参数是否为数组。
9 $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
10 $.isFunction() 判断某个参数是否为函数。
11 $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
12 $.support() 判断浏览器是否支持某个特性。
复制代码
八、事件操作
jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。
1 $('p').click(function(){
2 alert('Hello');
3 });
目前，jQuery主要支持以下事件：
复制代码
1 .blur() 表单元素失去焦点。
2 .change() 表单元素的值发生变化
3 .click() 鼠标单击
4 .dblclick() 鼠标双击
5 .focus() 表单元素获得焦点
6 .focusin() 子元素获得焦点
7 .focusout() 子元素失去焦点
8 .hover() 同时为mouseenter和mouseleave事件指定处理函数
9 .keydown() 按下键盘（长时间按键，只返回一个事件）
10 .keypress() 按下键盘（长时间按键，将返回多个事件）
11 .keyup() 松开键盘
12 .load() 元素加载完毕
13 .mousedown() 按下鼠标
14 .mouseenter() 鼠标进入（进入子元素不触发）
15 .mouseleave() 鼠标离开（离开子元素不触发）
16 .mousemove() 鼠标在元素内部移动
17 .mouseout() 鼠标离开（离开子元素也触发）
18 .mouseover() 鼠标进入（进入子元素也触发）
19 .mouseup() 松开鼠标
20 .ready() DOM加载完成
21 .resize() 浏览器窗口的大小发生改变
22 .scroll() 滚动条的位置发生变化
23 .select() 用户选中文本框中的内容
24 .submit() 用户递交表单
25 .toggle() 根据鼠标点击的次数，依次运行多个函数
26 .unload() 用户离开页面
复制代码
以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：
复制代码
1 $('input').bind(
2 'click change'， //同时绑定click和change事件
3 function(){
4 alert('Hello');
5 }
6 );
复制代码
如果你只想让事件运行一次，这时可以使用.one()方法。
1 $("p").one("click"， function(){
2 alert("Hello"); //只运行一次，以后的点击不会运行
3 });
.unbind()用来解除事件绑定。
$('p').unbind('click');
所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，比如下面例子中的e：
1 $("p").click(function(e){
2 alert(e.type); //"click"
3 });
这个事件对象有一些很有用的属性和方法：
复制代码
1 event.pageX 事件发生时，鼠标距离网页左上角的水平距离
2
3 event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
4
5 event.type 事件的类型(比如click)
6
7 event.which 按下了哪一个键
8
9 event.data 在事件对象上绑定数据，然后传入事件处理函数
10
11 event.target 事件针对的网页元素
12
13 event.preventDefault() 阻止事件的默认行为(比如点击链接，会自动打开新页面)
14
15 event.stopPropagation() 停止事件向上层元素冒泡
复制代码
在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：
复制代码
1 $('a').click(function(){
2 if ($(this).attr('href').match('evil')){//如果确认为有害链接
3 e.preventDefault(); //阻止打开
4 $(this).addClass('evil'); //加上表示有害的class
5 }
6 });
复制代码
有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。
1 $('a').click();
2 $('a').trigger('click');
九、特殊效果
jQuery允许对象呈现某些特殊效果。
$('h1').show(); //展现一个h1标题
常用的特殊效果如下：
复制代码
1 $('h1').show(); //展现一个h1标题
2 常用的特殊效果如下：
3 .fadeIn() 淡入
4 .fadeOut() 淡出
5 .fadeTo() 调整透明度
6 .hide() 隐藏元素
7 .show() 显示元素
8 .slideDown() 向下展开
9 .slideUp() 向上卷起
10 .slideToggle() 依次展开或卷起某个元素
11 .toggle() 依次展示或隐藏某个元素
复制代码
除了.show()和.hide()，所有其他特效的默认执行时间都是400ms(毫秒)，但是你可以改变这个设置。
1 $('h1').fadeIn(300); // 300毫秒内淡入
2 $('h1').fadeOut('slow'); //缓慢地淡出
在特效结束后，可以指定执行某个函数。
$('p').fadeOut(300, function(){$(this).remove(); });
更复杂的特效，可以用.animate()自定义。
复制代码
1 $('div').animate(
2 {
3 left : "+=50"，//不断右移
4 opacity : 0.25 //指定透明度
5 },
6 300,// 持续时间
7 function(){ alert('done!'); }//回调函数
8 );
复制代码
.stop()和.delay()用来停止或延缓特效的执行。
$.fx.off如果设置为true，则关闭所有网页特效。
回到顶部
v写在前面
如果十八般武艺都融会贯通，如果什么兵器你都耍得有模有样，那么这篇博文你大可以跳过了。只是在忘记的时候，可以拿出来温习温习。
回到顶部
v基本概念
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
简单点一句话概括： javascript是基于对象、驱动事件、具有安全性、弱类型的脚本语言。
1.声明变量关键字： var
2.变量的名称：
由数字、字母、下划线、$组成
数字不能开头
严格区分大小写
不能以关键字命名
3.数据类型：
基本数据类型
数值类型(整形和浮点型)
字符串类型
布尔类型
引用(复合)数据类型
函数：function()
对象：object()
特殊数据类型 undefined
4.检测数据类型的方法： typeof()
5.运算符优先级： ()>!>算术>关系>&&>||>条件>赋值
6.类型转换方式：
parseInt() 是将字符串类型转换为整型
parseFloat() 是将字符串类型转换为浮点型
NaN 不是一个数字
回到顶部
v函数介绍
1.函数的定义： 函数(又称为方法)用于对一段为了达到某种目的的代码进行归类。
2.函数的生命：
function 函数名([参数1],[参数2],...)
{
//代码模块
}
3.定时器： setInterval("函数名",时间毫秒) ps:这个详细部分在下面
4.系统函数：
日期函数
getYear():可返回表示年份的两位或四位的数字
getMonth():可返回表示月份的数字
getDate():可返回月份的某一天
toLocaleString():可根据本地时间把 Date 对象转换为字符串，并返回结果
Math对象
abs():可返回数的绝对值
round():可把一个数字舍入为最接近的整数
复制代码
复制代码
random():可返回介于 0 ~ 1 之间的一个随机数
floor():可对一个数进行下舍入
复制代码
复制代码
ceil():可对一个数进行上舍入
复制代码
复制代码
max():可返回两个指定的数中带有较大的值的那个数
min():可返回指定的数字中带有最低值的数字，效果与max相似 demo略
数组函数
concat():方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
join():方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
复制代码
复制代码
pop():方法用于删除并返回数组的最后一个元素
复制代码
复制代码
push():可向数组的末尾添加一个或多个元素，并返回新的长度。
复制代码
复制代码
回到顶部
v浏览器对象BOM
1.windows对象：
Location 地址对象
history 历史对象
document 文档对象
event 事件对象
screen 屏幕对象
navigator 浏览器对象
2.调用方式：
windows.属性=" "
windows.方法();
3.windows对象的三种弹出对话框方法：
alert() 用于显示带有一条指定消息和一个 OK 按钮的警告框 Demo
confirm()用于显示一个带有指定消息和 OK 及取消按钮的对话框 Demo
prompt()用于显示可提示用户进行输入的对话框 Demo
4.windows对象的两种弹出框口的方法：
Open()用于打开一个新的浏览器窗口或查找一个已命名的窗口
参数 描述
URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 和
- 上一篇 »CDN知识详解
- 下一篇 »JAVA学习笔记—review基本知识[反射与异常]