JavaScript+JQuery笔记

 第一部分 JavaScript

一、简介

　　一种脚本语言，跟Java没任何关系，基于浏览器开发，不同的浏览器版本有不同的javascript版本的支持。微软提出：以后不要用javascript了，这个存在很大的兼容性问题，另外推荐一门优秀的脚本语言VBScript，后来VBScript几乎没使用了。再后来javascript的发展超出了设计者本人的预期，由于改良的设计出现了Node.JS的编程开发，Node.JS使用javascript作为服务器端编程
　　js代码可以嵌入到html中，可以是任意位置，但是一般会在中，在

 

JavaScript对象和JSON字符串相互转换

1. JavaScript支持
   eval('(' + jsonstr + ')');
   （不推荐,因为eval不会去看json字符串是否合法，解析了json字符串，而且会执行字符串中的方法）
2. 浏览器支持
   JSON.parse(jsonstr);
   JSON.stringify(jsonobj);
   注：ie8(兼容模式),ie7和ie6没有JSON对象，需要引入 json.js 或 json2.js（http://www.json.org/）
3. JQuery支持
   $.parseJSON( jsonstr ); 
   反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();
   
   

java对象和json字符串相互转换
使用jackson的jar包
实例化转换器：ObjectMapper mapper = new ObjectMapper();
将java对象转换为json字符串：String json = mapper.writeValueAsString(user);
将json字符串转换为对象：user = mapper.readValue(json, User.class);

使用
JSON最常见的用途之一：从WEB服务器上读取JSON数据（作为文件或HttpRequest），将JSON数据转换为JavaScript对象，然后在网页中使用该数据

在线json校验工具
http://www.bejson.com/

 

 

---

 

第三部分 JQuery

 

javascript对浏览器差异的复杂处理 通常会很困难也很耗时，因此产生了javascript库 （这些库也叫javascript框架）

jQuery 是目前最受欢迎的 JavaScript 框架，“写的更少，但做的更多”的轻量级 JavaScript 库，极大的简化了javascript编程。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）
引用JQuery

下载、引用。

也可以不下载，直接引用google或Microsoft的JQuery

一、基础语法

　　jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

1. 语法
   $(selector).action()
   $ ： JQuery
   selector ：选择器，查找html元素http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
   action：对元素的操作
   
   
2. ready()
   文档就绪函数
   window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
   $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
   $(document).ready(function(){})可以简写成$(function(){});

二、事件和方法

$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});

$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
alert("Default prevented: " + event.isDefaultPrevented());
});
});
上面两端代码，e和event是两个事件对象，在触发该事件的时候，系统会给传给你这个参数，他包含了触发该事件的一些信息，如：e就代表了鼠标滑动事件，从e中可以获取指针的位置

事件	说明	实例
bind()	绑定一个事件
unbind()	移除绑定的事件
click()	点击
dblclick	双击
focus()	获得焦点（点击输入框）
blur()	失去焦点（点击输入框外）
change()	文本内容或选项被更改，仅适用于input 、textarea、select
delegate()	为元素的某个子元素添加一个事件
undelegate()	删除由 delegate() 方法添加的一个或多个事件处理程序
live()	为元素添加事件
die()	移除通过live()添加的事件	$("p").die();
error()	元素遇到错误（没有正确载入）
event.preventDefault()	阻止元素的默认行为	阻止打开链接
event.isDefaultPrevented()	是否调用了preventDefault()方法
event.pageX	鼠标位置 距文档左边缘
event.pageY	鼠标位置 距文档上边缘
event.result	事件返回的结果
event.target	事件是由哪个元素触发的
event.timeStamp	1997.1.1—事件发生的毫秒数（时间戳）
event.type	触发事件类型 如mouseout、click等
event.witch	按了哪个键或按钮
keydown()	键被按下
keyup()	键被松开
Keypress()	按键次数
load()	元素已加载
ready()	文档(DOM)已加载
mousedown()	按下鼠标（click是按下松开才触发）
mouseup	松开鼠标
mouseenter()	鼠标指针进入（穿过）元素
mouseleave()	指针离开元素
mousemove()	鼠标在元素中移动
mouseout()	指针离开元素或他的子元素
mouseover()	指针穿过元素或其子元素
resize()	跳转浏览器窗口大小时
scroll ()	滑动鼠标的滑轮
select()	当 textarea 或文本类型的 input 元素中的文本被选中时
submit()	提交表单时
toggle()	绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
trigger()	指定触发某个事件
triggerHandler()	指定触发某个事件，但不会触发事件的默认行为（如表单提交）
unload ()	离开页面 关闭浏览器等 （只用于window对象）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

效果	功能	实例
animate()	改变指定元素的css样式，实现动画效果
stop()	停止当前正在执行的动画
queue()	显示被选元素的排队函数
dequeue()	运行被选元素的下一个排队函数
clearQueue()	停止队列中还未执行的函数
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
hide()	隐藏
fadeOut()	淡出隐藏
slideUp()	滑动隐藏
show()	显示
fadeIn()	淡入显示
slideDown()	滑动显示
fadeTo()	从当前透明度到指定透明度
slideToggle()	（滑动方式）隐藏->显示 或 显示->隐藏
toggle()	隐藏->显示 或 显示->隐藏
文档操作	描述    所有的方法对于XML和HTML都适用 除了html()
addClass()	添加类名
before()	元素前面加入内容 （在元素外）
after()	元素后面加入内容 （在元素外）
append()	元素结尾加入内容（还在元素中）
appendTo()	元素结尾加入内容（还在元素中）
attr()	设置元素的属性
clone()	生成元素的副本
detch()	移除元素,会保留所有绑定的事件、附加的数据
remove()	移除被选元素，包括所有文本和子节点,不会保留所有绑定的事件、附加的数据
empty()	移除元素的内容
hasClass()	是否包含指定的class
html()	设置元素的内容(innerHTML)
insertBefore()	把元素插入到括号中指定的元素前
insertAfter()	把元素插入到括号中指定的元素后
prepend()	元素开头插入括号中指定的内容，还在该元素内
prependTo()	把元素插入到括号中指定的元素的开头，还在元素内
removeAttr()	移除指定属性
removeClass	移除类
replaceAll()	用括号中的内容替换元素
replaceWith()	用括号中的内容替换元素
text()	设置或返回被选元素的文本内容
toggleClass()	切换元素的class为括号中指定的class值
unwrap()	删除被选元素的父元素
val()	返回或设置被选元素的值
wrap()	把元素放置在括号中指定的 HTML 内容或元素中
wrapAll()
wrapInner()	用括号中的元素包裹选中的元素
CSS操作	描述
css()	设置元素的样式属性
height()	设置或返回元素的高度
offset()	返回第一个匹配元素相对于文档的位置
offsetParent()	返回最近的祖先定位元素定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素
position()	返回匹配元素相对于父元素的位置（偏移）
scrollLeft()	返回或设置匹配元素的滚动条的水平位置
scrollTop()	返回或设置匹配元素的滚动条的垂直位置
width	返回或设置匹配元素的宽度
Ajax操作	描述
$.ajax()	执行HTTP异步请求（ajax请求）
$.ajaxSetup()	设置全局的ajax请求选项
$.get()	使用HTTP GET请求从服务器加载数据，取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax
$.post()	使用HTTP POST请求从服务器加载数据
$.getJSON()	简写的 Ajax 函数,通过HTTP GET请求从服务器载入json数据
$.getScript()	使用HTTP GET请求从服务器加载javascript文件，然后执行该文件
$.param()	创建数组或对象的序列化表示，适合在URL查询字符串或ajax请求中使用
.ajaxSend()	请求发送之前...
.ajaxStart()	请求发送前...
.ajaxError()	请求完成且出现错误时
.ajaxStop()	请求结束时执行...
.ajaxComplete()	请求完成时执行括号中的函数
.ajaxSuccess()	请求成功完成时执行括号里的内容
.serialize()	将表单内容序列化为字符串
.serializeArray()	序列化表单结构，返回json数据
遍历	说明
first()	元素集合中的第一个元素
last()	元素集合中的最后一个元素
slice()	指定哪几个
sibling()	它的同胞元素
next()	元素集合中每个元素的下一个紧随的同胞元素
nextAll()	元素集合中每个元素的所有跟随的同胞元素
nextUtil()
not()	从元素集合中删除括号中指定的元素
each()	为每个匹配到的元素指定执行函数
add()	将括号中的元素添加到匹配到的元素集合中
parent()	元素集合中每个元素的父元素
parents()	元素集合中每个元素的祖先元素
parentsUtil()
offsetParent()	获得元素的最近的父元素
children()	返回元素的所有直接子元素
find()	返回元素集合中每个元素的后代元素
closest()
contents()	获得匹配元素集合中每个元素的子节点，包括文本和注释节点
end()
eq()	返回匹配到的元素集合中下标为n的元素 eq(n)
has()	是否包含括号中指定的元素
is()	是否是括号中元素的子元素
map()	把元素集合中的每个元素 通过函数传递  生成包含返回值的新的JQuery对象
...................

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/gucl/p/8294242.html