首页 > 代码库 > jQuery03

jQuery03

2024-09-25 08:18:39   203人阅读

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

jQuery.fn = jQuery.prototype = {  //添加实例属性和方法
    jquery : 版本
    constructor : 修正指向问题
    init() : 初始化和参数管理
    selector : 存储选择字符串
    length : this对象的长度
    toArray() :  转数组
    get() :  转原生集合
    pushStack() :  JQ对象的入栈
    each() :  遍历集合
    ready() :  DOM加载的接口
    slice() :  集合的截取
    first() :  集合的第一项
    last() :   集合的最后一项
    eq() :   集合的指定项
    map() :   返回新集合
    end() :   返回集合前一个状态
    push() :    (内部使用)
    sort() :    (内部使用)
    splice() :  (内部使用)
};

</script>
<script src="jquery-2.0.3.js"></script>
<script>

alert( $().jquery );//2.0.3

function Aaa(){
}
Aaa.prototype.constructor = Aaa;//这是js源码自动生成的
Aaa.prototype.constructor = Array;//改变指向
Aaa.prototype.name = ‘hello‘;
Aaa.prototype.age = 30;
Aaa.prototype = {
    constructor : Aaa,//不重指就是object
    name : ‘hello‘,
    age : 30
};
var a1 = new Aaa();
alert( a1.constructor );//Aaa
----------------------------------------------------------------------
//$() jQuery()  对外接口
$(function(){
    console.log( $(‘li‘).css(‘background‘,‘red‘) );
    $(‘li‘)[1].style.background = ‘red‘;
});

var aLi = document.getElementsByTagName(‘li‘);//$(‘li‘)
for(var i=0;i<aLi.length;i++){
    aLi[i].style.background = ‘red‘;
}

this = {//json不能for循环，因为没有length属性。只能for in 循环
    0 : ‘li‘,
    1 : ‘li‘,
    2 : ‘li‘,
    length : 3
};
for(var i=0;i<this.length;i++){
    this[i].style.background = ‘red‘;
}
</script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-203.js"></script>

//jQury源码加载进来的，是一个立即执行函数，会先执行一些代码。
<script>

$(function(){
    var str = ‘<li>1</li><li>2</li><li>3</li>‘;
    var arr = jQuery.parseHTML(str);  //[‘li‘,‘li‘,‘li‘]
    alert(arr[0]);
    $.each(arr,function(i){
        $(‘ul‘).append( arr[i] );
    });
    
    
    var str1 = ‘<li>1</li><li>2</li><li>3</li> <script>alert(4)<\/script>‘;
    var arr1 = jQuery.parseHTML(str,document,true));
    $.each(arr,function(i){
        $(‘ul‘).append( arr[i] );
    });
    
    
    var arr = [‘a‘,‘b‘];
    var arr1 = {
        0 : ‘a‘,
        1 : ‘b‘,
        length : 2
    };
    var arr2 = [‘c‘,‘b‘];
    console.log( $.merge(arr,arr2) );//数组合并[a,b,c,d]
    console.log( $.merge(arr1,arr2) );//json合并｛0,：a,1:b,2:c,3:d｝
    
    
    $(‘<li></li>‘,{title : ‘hi‘,html : ‘abcd‘,css : {background:‘red‘}}).appendTo( ‘ul‘ );
    //html:‘abcd‘,调用this.html(‘abcd‘)方法
});

</script>
</head>

<body>
<ul>
</ul>
</body>
</html>

 

jQuery03


联系
我们