文章目录
- JavaScript
- 一、JSON
- 1、简介
- 2、JSON语法规则
- 3、JSON对象与JSON字符串的相互转换
- 二、jQuery
- 1、引入jQuery库文件
- 2、jQuery入门程序
- 3、加载模式
- 4、基础DOM操作
- 5、css操作
- 6、插入节点方法
- 7、事件
JavaScript
一、JSON
1、简介
JSON 英文全称 JavaScript Object Notation,是一种轻量级的数据交换格式。
JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON
库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。
2、JSON语法规则
数据为 键/值 对;
数据由逗号分隔;
大括号保存对象;
方括号保存数组。
示例:
{
"name": "JavaScript Object Notation",
"sites": [
{ "name":"google" , "url":"www.google.com" },
{ "name":"百度" , "url":"www.baidu.com" }
]
}
注意:JSON字符串大括号外面必须是单引号,里面必须是双引号,必须是紧凑格式,不能美化格式(空格、换行等)!
例:
'{"name":"JavaScript Object Notation","sites":[{"name":"google","url":"www.google.com"},{"name":"百度" , "url":"www.baidu.com"}]}'
3、JSON对象与JSON字符串的相互转换
JSON.parse();//解析json字符串
JSON.stringify();//将json对象转为json字符串
例:
var json = {
"name": "JavaScript Object Notation",
"sites": [{
"name": "google",
"url": "www.google.com"
},
{
"name": "百度",
"url": "www.baidu.com"
}
]
};
var jsonStr = JSON.stringify(json);//将json对象转为json字符串
var json1=JSON.parse(jsonStr);//解析json字符串,转化为json对象
//注意:json字符串如果不是紧凑格式,会解析失败
二、jQuery
1、引入jQuery库文件
方式一:
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
方式二:
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
2、jQuery入门程序
$(function () {
$('button').click(function () {
alert("Hello JQuery");
});
});
3、加载模式
JavaScript等待加载:
window.onload=function(){}
jQuery等待加载:
$().ready(function(){});
简写: $(function(){});
4、基础DOM操作
html(); //获取元素中html内容
html(value); //设置元素中html内容
text(); //获取元素中文本内容
text(value); //设置元素中文本内容
val(); //获取表单中文本内容
val(); //设置表单中文本内容
注意:当我们使用 html()或 text()设置元素里的内容时,会清空原来的数据。而我们期望能够追加数据的话,需要先获取原本的数据。
例: $('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
attr(key); //获取某个元素key属性的值
attr(key, value); //设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}); //设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}); //设置某个元素 key,通过函数来设置
5、css操作
css(name); //获取某个元素行内的 CSS 样式
css([name1, name2, name3]); //获取某个元素行内多个 CSS 样式,返回JSON对象
css(name, value); //设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}); //设置某个元素行内多个 CSS 样式
addClass(class); //给某个元素添加一个 CSS 类
addClass(‘class1 class2 class3...’); //给某个元素添加多个 CSS 类
removeClass(class); //删除某个元素的一个 CSS 类
removeClass(‘class1 class2 class3...’); //删除某个元素的多个 CSS 类
toggleClass(class1 class2 class3...); //切换默认样式和指定样式
toggleClass(function(){}); //通过匿名函数设置切换的规则
width(); //获取某个元素的宽度
width(value); //设置某个元素的宽度
width(function (index, width) {}); //通过匿名函数设置某个元素的宽度
height(); //获取某个元素的高度
height(value); //设置某个元素的高度
height(function (index, width) {}); //通过匿名函数设置某个元素的长度
6、插入节点方法
内部插入节点的方法:
append(content);//向指定元素内部后面插入节点 content
append(function (index, html) {});//使用匿名函数向指定元素内部后面插入节点
appendTo(content);//将指定元素移入到指定元素 content 内部后面
prepend(content);//向指定元素 content 内部的前面插入节点
prepend(function (index, html) {});//使用匿名函数向指定元素内部的前面插入节点
prependTo(content);//将指定元素移入到指定元素 content 内部前面
外部插入节点方法:
after(content);//向指定元素的外部后面插入节点 content
after(function (index, html) {});//使用匿名函数向指定元素的外部后面插入节点
before(content);//向指定元素的外部前面插入节点 content
before(function (index, html) {});//使用匿名函数向指定元素的外部前面插入节点
insertAfter(content);//将指定节点移到指定元素 content 外部的后面
insertBefore(content);//将指定节点移到指定元素 content 外部的前面
包裹节点:
wrap(html);//向指定元素包裹一层 html 代码
wrapAll(html);//用 html 将所有元素包裹到一起
wrapInner(html);//向指定元素的子内容包裹一层 html
wrap(element);//向指定元素包裹一层 DOM 对象节点
wrapAll(element);//用 DOM 对象将所有元素包裹在一起
wrapInner(element);//向指定元素的子内容包裹一层 DOM 对象节点
unwrap();//移除一层指定元素包裹的内容
7、事件
bind(); //绑定事件
on();//绑定事件,用法与bind()一样
例:
//方式1:
$('input').bind('click', function () {
alert('点击!');
});
//方式2:普通处理函数
$('input').bind('click', fn);
function fn() {
alert('点击!');
}
//方式3:通过对象键值对绑定多个参数
$('input').bind({
'mouseout' : function () {
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});
//方式4:简写
$('button').click(function (e) {
alert('点击!');
}).mouseover(function () {
alert('移入');
}).mouseout(function () {
alert('移出');
});
unbind();//删除所有当前元素的事件
off();//功能和unbind一样
unbind(type);//删除指定类型事件
one();//事件只执行一次
preventDefault();//取消某个元素的默认行为
stopPropagation();//取消事件冒泡
trigger和triggerHandler //自动触发事件
区别:triggerHandler()方法并不会触发事件的默认行为,而trigger()会;
triggerHandler()方法只会影响第一个匹配到的元素,而trigger()会影响所有。
<form action="123.html" method="get">
<input type="submit" value="提交" />
</form>
$('form').trigger('submit'); //模拟用户执行提交,并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交,并阻止的默认行为