第二节 JQuery原理和核心方法

最新推荐文章于 2024-09-25 18:15:20 发布

DarkAngel1228

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量516

点赞数

文章标签： jquery 对象 javascript

本文链接：https://blog.csdn.net/DarkAngel1228/article/details/53768950

版权

一.js对象和jquery对象的区别

JQuery是js的中的new Object生成的普通对象

//JQuery的原形开发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaa</h1>
    <script type="text/javascript">
    function $(){
        obj = new Object();
        obj.username= 'usr123';
        obj.say=function(){
            alert('my name is : '+this.username)
            return this;
        }
        obj.eat = function(){
            alert('I am eating !');
        }
        return obj;
    }
        //对象的链式结构
        $().say().eat();
    </script>   
</body>
</html>

二.js对象和jquery对象的属性方法能不能公用?

不能共用

三.js对象和jquery对象能不能互换?

能
js对象 =>jquery对象 ——- 用$(DOM对象)
jquery对象 =>js对象 ——– $(DOM对象)[0]
或$(DOM对象).get(0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            font-family:微软雅黑;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<body>
    <img src="../image/1.jpg" id="imgid" alt="">    
    <script type="text/javascript">
        imgobj = document.getElementById('imgid');

        $(imgobj).click(function(){
            this.src = '../image/2.jpg';
            //$(this).attr({'src':'../image/2.jpg'});      
        });
    </script>   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            font-family:微软雅黑;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>aaaaaaaaaa</h1>
    <h1>bbbbbbbbbb</h1>
    <script type="text/javascript">
        arr=$('h1').get();
        obj = $('h1').get(0);
        alert(arr);
        alert(arr[0].outerHTML);
        alert(arr[1].outerHTML);
        alert(obj.outerHTML);
    </script>   
</body>
</html>

四.核心方法

size()

each()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击显示行号</title>
    <style type="text/css">
        *{
            font-family:微软雅黑;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1> 
    <script type="text/javascript">
        //获取jQuery 对象中元素的个数与length相同
        $('h1').size();
        //for循环
        $('h1').each(function(i){
            //$('h1').get()[i].setAttribute('num',i+1);//把jquery转换成dom对象,并使用js方法
            //添加属性
            $(this).attr({'num':i+1});
        });
        $('h1').click(function(){
            //this.innerHTML=this.getAttribute('num');
            //显示属性
            $(this).html($(this).attr('num'));
        }); 
    </script>   
</body>
</html>

index()
搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<body>
    <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <script type="text/javascript">
        var a = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
        var b = $('li').index($('#bar')); //1，传递一个jQuery对象
        var c = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
        var d = $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
        var e = $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。  
        alert(a);
        alert(b);
        alert(c);
        alert(d);
        alert(e);
    </script>
</body>
</html>

data() 数据缓存
在元素上存放数据,返回jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击显示行号</title>
    <style type="text/css">
        *{
            font-family:微软雅黑;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1>
    <h1>aaaaaaaaaa</h1> 
    <script type="text/javascript">
        $('h1').each(function(i){

            $(this).data({'num':i+1});
        });
        $('h1').click(function(){
            $(this).html($(this).data('num'));
        }); 
    </script>   
</body>
</html>