jQuery 之笔记整理

最新推荐文章于 2024-01-18 15:49:16 发布

紫陌520

最新推荐文章于 2024-01-18 15:49:16 发布

阅读量249

点赞数 1

分类专栏： jQuery 文章标签： jquery 前段框架

本文链接：https://blog.csdn.net/u013987258/article/details/80987584

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

    <img src="a.png" alt="">
    <script>
        var i = 0;
         $('div').click(function () {
             if (i%2 == 0){
                 this.src = 'b.png';
             } else {
                 this.src = 'a.png';
             }
             i ++;
         })
    </script>

    <img src="a.png" alt="">
    <script>
        $('div').toggle(   //或者hover方法
            function () {
                this.src = 'b.png';
            },
            function () {
                this.src = 'a.png';
            }
        )
    </script>

toggle:循环单击

hover:鼠标移入移除

上面写两个例子大家可以自己试一下，下面是主要的内容：

注意：当jquery中$方法冲突，可以使用jQuery 即 $() - >jQuery()

jQuery框架：

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

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

下边是jquery原型开发模式：

function $() {
    var obj = new Object();
    obj.username = 'user123';
    obj.say = function () {
    alert('my name is : ' + this.username);
        return obj;
    }
    obj.eat = function () {
        alert('i am eating');
    }
    return obj;
}
//对象链式开发
$().say().eat();

2. js对象和jquery对象的方法能不能共用

不能共用

3. js对象和jquery对象的转换

1）js ->jquery $(dom)

2) jquery -> js $('h1')[0] $('h1').get(0) $('h1').get()[0]

请分别看下边两个例子：

    <img src="a.jpg" id="imgid">
    <script>
       var imgobj = document.getElementById('imgid');
       // imgobj.onclick = function () {
       //     this.src = 'b.jpg';
       // };

       $(imgobj).click(function () {
           // this.src = 'b.jpg';          //dom方法
           $(this).attr({'src':'b.jpg'});  //jquery方法
       })
    </script>

    <h1>123</h1>
    <h1>456</h1>
    <script>
       var data = $('h1')[0].outerHTML; //或者 $('h1').get(0)    $('h1').get()[0]
       alert(data);   //    <h1>123</h1>

       var arr =  $('h1').get();
       console.log(arr);  //打印出来的是数组 [h1,h1]
    </script>

4. 核心方法

size()

var len = $('h1').size();
console.log(len);  //2

length

var len = $('h1').length;
console.log(len);  //2

get()

get(index)

each()：遍历

    <h1>abc</h1>
    <h1>abc</h1>
    <h1>abc</h1>
    <h1>abc</h1>
    <script>
        $('h1').each(function (i) {
            console.log(i);  //0,1,2,3
            $('h1').get()[i].setAttribute('num',i + 1);  //$(this).attr({'num': i+1})     在标签中加属性了
        });
        $('h1').click(function () {
            this.innerHTML = this.getAttribute('num');   //$(this).html($(this).attr('num'));
        })
    </script>

index()：检索

    <ul>
        <li id="foo">foo</li>
        <li id="bar">bar</li>
        <li id="baz">baz</li>
    </ul>
    <script>
         $('li').click(function () {
             var index = $(this).index('li');
             console.log(index);
         })
    </script>

data()：往jquery对象身上赋值

    <h1>abc</h1>
    <h1>abc</h1>
    <h1>abc</h1>
    <h1>abc</h1>
    <script>
        $('h1').each(function (i) {
            console.log(i);  //0,1,2,3
            $(this).data({'num': i+1})      //不往标签中加属性
        });
        $('h1').click(function () {
            $(this).html($(this).data('num'));
        })
    </script>