JSON格式字符串, 转换为JSON对象/数组
格式1.
通过eval 将字符串执行, 得到返回值, 并添加变量名
var 对象名 = eval('('+JSON格式字符串+')');
格式2.
通过JSON.parse ,来将字符串转换为对象
var 对象名 = JSON.parse(json格式字符串);
注意:
JSON格式的字符串, 建议使用单引号嵌套双引号的形式 !
案例:
var str = '{"id":"10001","name":"张三","sex":"男","hobby":["打游戏","学Java","敲代码"]}';
//var jsonObject = eval('('+str+')');
var jsonObject = JSON.parse(str);
console.info(jsonObject.hobby[2]);
CSS的透明样式
opacity: 1;//不透明
opacity: 0;//透明
Jquery 框架
使用步骤:***
1. 下载Jquery.js文件
2. 在HTML文件中, 引入Jquery.js文件
3. 开始使用
Jquery中的onload函数 ***
格式:
$(function(){
//当网页加载完毕时, 执行
});
Jquery对象 *
Jquery对象 就是一个DOM对象的集合 !
DOM对象无法使用Jquery对象的API
Jquery对象也无法使用DOM对象的API
DOM对象与Jquery对象 互相转换 *
- 将dom对象 转换为 Jquery的对象
格式:
var $obj = $(dom对象或dom对象数组);
案例:
$(function(){
var div1 = document.getElementById("div1");
div1.innerHTML = "Hello Jquery !";
var $div1 = $(div1);
$div1.css({
"font-size":"20px",
"color":"red",
"border":"1px solid red"
});
});
- 将Jquery对象 转换为DOM对象
格式:
var dom = $obj.get(下标);
案例:
$(function(){
var div1 = document.getElementById("div1");
var $div1 = $(div1);
$div1.css({
"font-size":"20px",
"color":"red",
"border":"1px solid red"
});
$div1.get(0).innerHTML = "哈哈哈哈哈哈";
});
选择器 *
Jquery中 查找一个或一组元素的方式, 不再是通过document.getElementByXXX的方式,
而是通过类似CSS技术中的 选择器的方式, 来得到元素的Jquery对象
注意: 通过选择器获取的是Jquery对象, 不是dom对象 !
基本选择器 *****
- ID选择器
格式: var $obj = $("#id值");
- 类选择器
格式: var $obj = $(".class值");
- 标签名称选择器
格式: var $obj = $("标签名称");
层级选择器 熟悉
- 子选择器 ***
格式:
var $obj = $("父选择器>子选择器");
- 后代选择器
格式:
var $obj = $("父选择器 后代选择器");
- 后一个兄弟选择器
格式:
var $obj = $("选择器+兄弟选择器");
例如: $("#p1+#div1")
就是在选择id为p1的元素的下一个元素, 且下一个元素id必须为div1
- 后所有兄弟选择器
格式:
var $obj = $("选择器~兄弟选择器");
例如: $("#p1~div")
就是在选择id为p1的元素的后面 所有兄弟div元素
案例:
$(function(){
$("div>p").css({"font-size":"20px"});
$("body p").css({"font-size":"20px"});
$("#p1+p").hide(5000);
$("#p1~p").fadeOut(5000);
});
Jquery对象 样式函数
$obj.css({
样式key:样式值,
样式key:样式值
...
});