jQuery基础

最新推荐文章于 2022-11-15 10:08:40 发布

我可能是个假开发

最新推荐文章于 2022-11-15 10:08:40 发布

阅读量210

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/csdn_gia/article/details/79016134

版权

jQuery基础

一、jQuery简介

是一款JavaScript库
方便地处理HTML、事件、动画等

html:处理HTML文档中的DOM节点，如添加、删除等
事件：通过jQuery对页面上的事件进行处理（绑定或解绑事件）
动画：通过jQuery实现淡入、淡出、滑动等动画

可以兼容多浏览器
80%以上网站使用

1.jQuery下载与使用
①下载地址：
http://jquery.com/

②压缩和非压缩版本
• Download the compressed, production jQuery
下载压缩版本，用于生产
• Download the uncompressed, development
jQuery 下载非压缩版本，用于开发

③使用：放在body的最后，防止影响性能

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

④版本的选择：
• V1.x
• V2.x：不兼容IE6-8
• V3.x：分为精简版和普通版

⑤使用CDN
• Content Delivery Network 内容分发网络
• https://code.jquery.com/
使用CDN的好处：性能提高，加快下载速度

在页面中使用cdn：

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>

2.设计哲学
• Write less，do more

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--使用jQ-->
    <script>
        var checkedValue;
        var elements = document.getElementsByTagName('input');
        for(var i=0;i<elements.length;i++){
            if(elements[i].type === 'radio' && elements[i].name === 'test' && elements[i].checked){
                checkedValue = elements[i].value;
                break;
            }
        }
        console.log(checkedValue);

    </script>

    <!--使用js-->
    <script>
        var checkedValue=$('input:radio[name="test"]:checked').val();
        console.log(checkedValue);
    </script>
    <script src="js/jquery-3.2.1.js"></script>
</body>

结构、表现、行为分离：

结构表现和行为分离.jpg

混杂的.jpg

分离的.jpg

二、jQuery的使用

1.$
jQuery的全局变量，$为该全局变量的别名，其他的jQuery的函数、属性等都定义在该全局变量内。

window.jQuery === window.$

2.$.xxx
调用jQuery本身的属性和方法：

$.each(…)
$.noop
$.toArray()
…

3.$(xxx)
调用jQuery本身的选择，返回一个jQuery对象，xxx为一个查询表达式或者DOM元素等

$('#myDiv')
$('.myClass')
…
$(domObject) -> jQuery Object
$(xxx).get(0) -> DOM Object
$(xxx)[0] -> DOM Object

jQuery对象：
1.是原生DOM对象的封装
2.jQuery对象和原生的DOM对象不同（但可以相互转换）
3.jQuery对象包含了很多方法，方便的操作DOM元素

DOM和jQuery对象转换：任何DOM元素只要通过$()包裹住就变成了jQuery对象

4.链式语法chaining

$('#divTest').text('Hello, world!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color', 'red')

—>

$('#divTest')
.text('Hello, world!')
.removeClass('blue')
.addClass('bold')
.css('color', 'red')

内部：每次调用都会返回一个jQuery对象，所以就可以直接再调用，而不用重复再声明一次对象。

注意一：有些jQuery方法有破坏性，如find() add children filter等方法
注意二：有写jQuery方法并不返回jQuery对象

<body>
    <div id="divTest" class="blue">
        test
    </div>
    <div id="divTest2">
        <p>123</p>
        <p class="child">123</p>
        <p>123</p>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script>
        setTimeout(function(){
            $('#divTest').text('Hello,world')
            $('#divTest').removeClass('blue')
            $('#divTest').addClass('bold')
            $('#divTest').css('color','red')

            $('#divTest')
            .text('Hello,world')
            .removeClass('blue')
            .addClass('bold')
            .css('color','red')

            $('#divTest2')
            .find('p.child') //有破坏性，把整个jQuery对象的范围缩小了
            .css('color','red')
            //.end()  //可以通过end()方法还原：把元素的匹配恢复到上一次的状态
            .addClass('bold')

            $('#divTest2').get(0) //变成DOM对象之后，就不能用jQuery的链式方法了
            .find('p.child') 
            .css('color','red')
            //.end()  
            .addClass('bold')

        },2000)
    </script>
</body>

5.ready()

$(document).ready(function(){…})

一般在写jQuery的一些操作时，要保证页面的DOM已经加载完毕：
方法一：可以通过window.onload事件；
方法二：ready()方法；

针对有些页面，实际上DOM结构已经加载完毕了，但还在等待加载一些内容，比如一些图片网站，而window onload必须要等页面完全所有DOM的完成，也就是等待这些内容都加载完毕，图片下载完，iframe加载完才能加载window onload后面的处理。而ready方法只会检查DOM结构是否加载完，不会等待图片等其他东西，响应就会快很多。

<body>
    <!--大图片-->
    <img src="http://www.hcx.com/static/3.jpg" alt="" width="800"/>

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

    <script>
        //使用window.onload
        window.onload = function(){
            console.log('onload');
        }
        $(window).load(function(){
            console.log('load');
        });

        //使用ready
        $(document).ready(function(){
            console.log('ready');
        })
    </script>
</body>

注意：两个方法最好不要同时使用，有些情况会导致ready失效

我可能是个假开发

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

jQuery基础一、jQuery简介是一款JavaScript库方便地处理HTML、事件、动画等html:处理HTML文档中的DOM节点，如添加、删除等事件：通过jQuery对页面上的事件进行处理（绑定或解绑事件）动画：通过jQuery实现淡入、淡出、滑动等动画可以兼容多浏览器 80%以上网站使用1.jQuery下载与使用 ①下载地址： http://jquery.com/②压缩和非
复制链接

扫一扫