jQuery基本理解

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’) 此例错误；

jQuery框架理解

DOM属性理解

相关推荐