jquery
来源:互联网 发布:大话西游源码 编辑:程序博客网 时间:2024/06/11 03:18
Jquery
都是jquery对象
$(function () {}); //执行一个匿名函数
$(‘#box’); //进行执行的ID元素选择(id为box)
$(‘#box’).css(‘color’,‘red’); //执行功能函数
加载页面
在延迟等待加载,JavaScript提供了一个事件为load,方法如下:
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载
alert($); //jQuery 对象方法内部
alert($()); //jQuery 对象返回的对象,还是 jQuery
alert($('#box')); //包裹 ID元素返回对象,还是jQuery
如果要返回DOM对象可以使用get方法 alert($('#box').get(0));
alert(document.getElementById('box')); //[object HTMLDivElement]
jQuery 想要达到获取原生的 DOM对象,可以这么处理:
alert($('#box').get(0)); //ID 元素的第一个原生 DOM
多个库之间的冲突
1.将 jQuery库在Base库之前引入,那么“$”的所有权就归Base库所有,而jQuery可
以直接用 jQuery 对象调用,或者创建一个“$$”符给jQuery使用。
var $$ = jQuery; //创建一个$$的jQuery对象
$(function () { //这是 Base的$
alert($('#box').ge(0)); //这是 Base的$
alert($$('#box').width()); //这是 jQuery的$$
});
2.如果将 jQuery库在Base库之后引入,那么“$”的所有权就归jQuery库所有,而Base
库将会冲突而失去作用。这里,jQuery 提供了一个方法:
jQuery.noConflict(); //将$符所有权剔除
var $$ = jQuery;
$(function () {
alert($('#box').ge(0));
alert($$('#box').width());
});
常规选择器
学习要点:
1.简单选择器
2.进阶选择器
3.高级选择器
一
alert($('ul il *').css('color','green'); //通配符选择器一般运用于局部的环境内能有效的增加效率
警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选越复杂,jQuery内部的选择器引擎处理字符串的时间就越长。比如:
$('div#box ul li a#link'); //让 jQuery内部处理了不必要的字符串
$('#link'); //ID 是唯一性的,准确度不变,性能提升
过滤选择器(其实就是css3的伪类选择器)
学习要点:
1.基本过滤器
2.内容过滤器
3.可见性过滤器
4.子元素过滤器
5.其他方法
$('li:first').css('background', '#ccc'); //第一个元素
$('li:last).css('background', '#ccc'); //最后一个元素
$('li:not(.red)).css('background', '#ccc'); //非 class 为 red 的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd).css('background', '#ccc'); //索引为奇数的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有 h1 ~ h6 元素
注意::focus过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者 Tab键盘敲击激活的。
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素
jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素,负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素li不含class为red的元素
注意::first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候,first会
实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,
如果需要明确是哪个父元素,需要指明:
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个 li
//或
$('#box li).last().css('background', '#ccc'); //同上
//选择元素文本节点含有ycku.com文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //选择空元素
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class是red的元素
$(':parent').css('background', '#ccc'); //选择非空元素
jQuery 提供了一个 has()方法来提高:has过滤器的性能:
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class是red的元素
jQuery 提供了一个名称和:parent相似的方法,但这个方法并不是选取含有子元素或文本
的元素,而是获取当前元素的父元素,返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div父元素停止
jQuery 在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用
$('.red').is('li'); //true,选择器,检测 class为是否为red
$('.red').is($('li')); //true,jQuery对象集合,同上
$('.red').is($('li').eq(2)); //true,jQuery对象单个,同上
$('.red').is($('li').get(2)); //true,DOM对象,同上
$('.red').is(function () { //true,方法,同上
return $(this).attr('title') == '列表 3'; //可以自定义各种判断
}));
$('li').eq(2).hasClass('red'); //和 is一样,只不过只能传递class
$('li').slice(0,2).css('color', 'red'); //前三个变成红色
注意:这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如:slice(2),从第三个
开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定
所有;slice(2,-2),前两个和末尾两个未选定。
$("div").find("p").end().get(0); //返回 div的原生DOM
$('div').contents().size(); //返回子节点(包括文本)数量
$('li').filter('.red').css('background','#ccc'); //选择li的class为red的元素
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择
//特殊要求函数返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQUERY
- jquery
- jQuery
- jquery
- jquery
- Easy2D游戏引擎 0th —— 引擎介绍
- 运行maven项目时报ProjectBuildingException
- hdu1166 单点修改区间查询
- Fragment界面莫名其妙自动刷新
- HDU6198 矩阵快速幂
- jquery
- html遮盖层
- 风口的猪(小米实习生笔试)
- 算法提高 ADV-138 班级排名
- 9.13
- Java基础五:浅clone和深clone
- iOS 弹幕制作
- 谈谈innerHTML和createTextNode的区别
- 记录python sys.argv 用法