jQuery基础

一、jQuery简介

是一款JavaScript库
造福地处理HTML、事件、动画等

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

能够包容多浏览器
八成之上网址选用

一.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
• V三.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对象:
一.是原生DOM对象的卷入
二.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')

中间:每便调用都会回来1个jQuery对象,所以就足以一贯再调用,而不用重新再声称1遍对象。

留意1:有个别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结构早已加载达成了,但还在等待加载1些内容,比如有的图纸网址,而window
onload必需要等页面完全具备DOM的形成,相当于等待那一个内容都加载实现,图片下载完,iframe加载完才能加载window
onload前边的处理。而ready方法只会检讨DOM结构是还是不是加载完,不会等待图片等任马珂西,响应就会快很多。

<body>
    <!--大图片-->
    <img src="http://www.hcx.com/static/3.jpg" alt="jQuery 1" 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失效

相关文章

网站地图xml地图