JQuery入门 初级插件02
程序员文章站
2022-04-03 17:14:06
...
- 先来介绍一下json,那什么是json?
JSON 全称单词 -->(JavaScript Object Notation)是一种轻量级的数据交换格式。
JSON基础结构: JSON结构有两种结构, json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。
1.2 json对象字符串的体现形式–> 例如:{sid:‘001’,sname:‘张三’,sage:‘18’ }
json对象数组的体现形式–> 例如:[9,4,3,5,7]
json对象混合的体现形式–> 例如:{sid:1007,
sname:‘李四’,
shobby:[‘吃饭’,‘睡觉’,‘打游戏’]
}
<script type="text/javascript">
$(function(){
//json第一种数据表现形式 :集合
var $jsonVal={
sid:'1',
sname:'张三'
}
//alert($jsonVal.sname);
console.log($jsonVal);
//json第二种数据表现形式 :数组
var $jsonArray=[1,2,3,4];
//alert($jsonArray[1]);
console.log($jsonArray);
//json第一种种数据表现形式 :混合模式
var $jsonObj={
sid:2,
sname:'monster',
hobby:['吃饭','打架','捉迷藏']
}
//alert($jsonObj.hobby);
console.log($jsonObj);
})
</script>
2 jquery的.fn.extend作用及区别 ?
2.1 虽然 javascript 没有明确的类的概念,但是用类来理解.fn.extend,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加类方法(用于扩充jquery类属性或方法用的),可以理解为添加静态方法。如:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5
$.extend(a,b,c);后面的对象,扩充前一个对象,如若之前已经扩充过的属性会被覆盖,后面的新属性如若是之前没有的属性,就继续扩充;
2.2 jQuery.fn.extend(object);
对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
综合代码来看一个表格悬停变色,