jQuery框架理解
<div id="div">hello world</div>
<script>
(function(){
// 为了能全局下使用jQuery
window.jQuery = window.$ = jQuery;
function jQuery(arg){ //arg作为操作参数传入
return new init(arg);//实现无new操作 init()为入口函数
}
function init(arg){
var dom = document.getElementById(arg.slice(1));
this[0] = dom;
this.length = 1;
return this;
}
jQuery.prototype.text = function(){
console.log('text');
return this;//原型函数调用后返回jQuery对象 实现链式操作
}
jQuery.prototype.css = function(){
console.log('css');
return this;;//原型函数调用后返回jQuery对象 实现链式操作
}
init.prototype = jQuery.prototype;//jQuery对象原型 与 init对象原型连接 注意 不是jQuery.prototype = init.prototype;
})()
console.log($('#div').text().css());
$('#div');
</script>
DOM属性理解
text() html() value()比较: 可以接受函数,函数有2个参数 index element;
text() 取值与赋值都是一组
html() 取值取第一个,赋值赋一组
value() 取值取第一个,赋值赋一组
value() 可以传入一个数组 数组内字符串可以设置select的默认选取值,数组也可有多个值,选取多个;例:
<select id="list">
<option value="cute">可爱</option>
<option value="tender" selected>温柔</option>
<option value="no-reason">没有理由</option>
</select>
<button id="btn">btn</button>
<script>
$('#btn').click(function(){
$('#list').val(['no-reason']);
})
</script>
attr() prop() 方法比较:
attr() prop() 取值取一个, 赋值赋一组;
属性:
1:固有属性;
2:自定义属性;
attr() 可以设置,取所有属性
prop() 只能设置,取固有属性,不能操作自定义属性
注意点:
attr()获取没有设置的属性 返回值为undefind;
prop() 获取没有设置的属性(前提为固有属性) 返回值为空;如取自定义属性 返回值为nudefind;
另:有checked类属性 attr() 只要在标签上设置了checked属性就能获取 不能获取checked类属性的ture 或者 false的变化;而prop()能获取到checked类属性的变化,并且会返回状态(true false);
注意:prop()能够设置自定义的属性,但是对DOM结构不起影响,removeprop()只能删除自定义的属性,不能删除固有的属性,即:removeprop(‘class’)无效 ;不能删除,但是可以设置为空;
注意: prop()设置checked类的属性值是不要用字符串形式;例:prop(‘checked’,‘true’) 此例错误;