jQuery入门与选择器

jQuery是一个javaScript库，能够方便地处理HTML、事件、动画等。

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

HTML5中引入：放body标签的最下面，

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

如何选择版本：

V1.X：
V2.X：不兼容IE6-8，所以V2.X文件比V1.X小一些
V3.X：分为精简版和普通版；普通版与V2.X普通版差不多，更新相应API，加了相应性能优化。

使用CDN: 如 https://www.bootcdn.cn/

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

使用CDN好处：性能提高，分布于不同的服务器，加快下载速度。

设计哲学：

Write less, do more

window.jQuery === window.$ # $ === jQuery

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

什么是jQuery对象？

是原生DOM对象的封装，两者可以相互转化
jQuery对象和原生DOM对象不同
jQuery对象包含了很多方法，方便的操作DOM元素

链式语法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：
破坏性：如find(), add(), children(), filter()都是有破坏性的方法；
解决：用了以上方法还行还原到上一次查询的对象可以使用end()方法。

注意2：
某些jQuery方法并不返回jQuery对象。如get(0)返回的是DOM对象，此时后面不能够再调用jQueriy方法。

$(document).ready(function(){…}) VS window.onload
readey方法只会判断DOM元素是否加载完毕，不会等待图片、框架等加载，加快响应。

<script>
    // window.onload等待所有加载完毕
    window.onload = function () {
        console.log('onload');
    }

    // js加载事件的方式，和上面的等价写法
    $(window).load(function () {
        console.log('load');
    })

    // ready只会等待DOM元素加载完毕
    $(document).ready(function () {
        console.log('ready');
    })

</script>

jQuery入门与选择器

猜你喜欢