您的位置：首页 > Web前端 > JQuery

jQuery学习笔记

2017-10-09 22:43 218 查看

“"是jQuery当中最重要且独有的对象；本身就是jQuery对象的缩写形式

一.jQuery库的加载模式

我们在之前的代码一直使用$(function(){})这段代码进行首尾包裹，那么为什么必须要包裹这段代码呢？

原因在于我们的jQuery库文件是在body元素之前加载，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到

在延迟等待加载,JavaScript提供了一个load事件，方法如下：

window.onload = function(){};//JavaScript等待加载
$(document).ready(function(){});//jQuery等待加载

load和ready的区别在于：


区别	window.onload	$(document).ready()
执行时机	必须等待页面全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹代码
执行次数	只能执行一次，如果执行第二次，那么第一次执行就会被覆盖	可以执行多次，执行的效果不会被覆盖，即每一次执行的效果都能体现出来
简写	无	$(function(){});

二.多个库之间发生冲突的解决方案

当一个项目引入多个第三方库的时候，由于没有命名空间的约束（命名空间就好比在同一目录下的文件夹一样，名字相同就会发生冲突）,库与库之间难免会发生冲突

例如：prototype，还有JavaScript课程开发的Base库，都使用“”作为基准起始符,如果想和jQuery共容，有两种办法：1.将jQuery库在Base库之前引入，那么“”的所有权就归Base库所有，而jQuery可以直接用jQuery对象调用，或者创建一个“$$”符给jQuery使用

var $$ = jQuery;   //创建一个$$的jQuery对象
$（function）(){
alert($('#box').ge(0));//base的方法，jQuery库没有，$是base库的
alert($$('#box').width);//这是jQuery的$$
}

2.如果将jQuery库在Base库之前引入，那么”$”的所有权就归jQuery库所有，而Base库将会冲突而失去作用。这里,jQuery提供了一个方法：

jQuery.noConflict(); //将$符的所有权删除
var $$ = jQuery;
$(function(){
alert($('#box').ge(0));//[object HTMLDivElement]
})

三.常规选择器

3.1.获取一个ID为box元素的DOM对象

$('#box').css('color','red');

当页面中有多个ID同为box的元素，获取的是第一个ID为box的元素

<body>
<div id="box">老胡</div>
<div id="box">老徐</div>
<div id="box">阿黄</div>
<div id="box">胡小希</div>
</body>

此时

$('#box')

获取的是第一个div

3.2通过元素名获取

$('div')

获取所有的div元素的DOM对象

3.3类名称获取

$('.box')

获取所有的class为box的所有DOM对象

可以通过jQuery核心自带的一个属性length或size()方法来查看返回的元素个数

$('#box').size()

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航