map rop ret 一个 加载 求一个 20px jquery 对象
jQuery 是一个快速、简洁的 JavaScript 框架,优秀的 JavaScript 代码库(或 JavaScript 框架)。jQuery 设计的宗旨是 "write Less,Do More",即倡导写更少的代码,做更多的事情。
轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的 Ajax、出色的浏览器兼容性、链式编程、隐式迭代、丰富的插件支持
(1)ready() 事件
相当于 window.onload() 事件,页面标签加载完毕后触发 (window.onload 为页面完全加载完毕后触发)
- $(document.ready(function (){alert()};)); //完整写法
- $(function (){}); //简单写法
- //一般所有的JavaScript代码都需要写在这个事件中,$和jQuery是没什么区别的,用$比较方便
(2) 数组的遍历
- $.each(arry,function(key,value)){ key为键, value为值}
- return false; //跳出循环
(3)map 对象的使用(返回一个新的数组):
- var arrNew=$.map(arry,function(elemet,index)){
- return elemet;
- }
(4) 设置 CSS
- $('#div').css('backgroundColor','red');
- $('#div').css({ 'backgroundColor':'red','border':'1px solid green'});//设置多个则用键值对方式 //$('#div') 获取id为div的元素
(5)val 方法
- $('#p1').val('设置的值'); //不传递参数,则为获取到的value值,传递参数则为设置成的value值
(6)text 和 html
text() 类似于 DOM 中的 innertext html 类似 DOM 中的 innerHTML
(1)Dom 转换 jQuery 对象
var $divObj=$(divDom);
(2)jQuery 转 Dom 对象
var domDiv=$divObj[0]; 或者: var domDiv=$divObj.get(0);
(1)id 选择器:
$('#id')
(2) 标签选择器:
$('p')
(3) 类样式选择器:(应用了某个类样式):
$('.clas')
(4) 组合选择器 (用逗号隔开):
$('#id,p,.clas')
(5) 层次选择器
- $('#id p') //选取id下的所有p标签
- $('body > p') //选取body下的子元素 -->子元素选择
- //相邻元素选择:
- //选取下一个
- $('#id + p') //选取id接着的p标签,如果不是,则选取不了 //等价于: $('#id').next('p')
- //选取接下去的元素(同一等级)
- $('#id ~ p') //不传参,表示所有 //等价于: $('#id').nextall('p')
- //选取上一个元素(同理)
- $('p').prev('span') //上一个(没参数则表示上一个任意)
- $('p').prevall('span') //上同等所有的span //不传参,表示所有
(6) 属性选择器:
- $('td[isclicked=isclicked]') //选取具有isclicked属性
(7) 标签 + 类选择器 (该标签中应用了什么类)
$('p.clas')
(1) 判断页面上是否存在一个元素:
- $('#id').length>0 //即便选择器没有选择到任何元素,那么返回也不会是null或者undefined,而是一个长度为0的集合对象
(2) 追加一个新的类样式:
- $('#id').addClass('clss'); //不会覆盖之前的样式,样式名称不加.
(3) 判断一个标签是否应用了某个类样式
- $('#id').hasClass('class'); //返回布尔类型
(4) 移除类样式:
- $('#id').removeClass('class');
(5) 切换类样式的应用与移除
- $('#id').toggleClass('class'); //判断:如果有就移除,没有就应用
(1) 选取第一个: $('p:first')
(2) 选取最后一个: $('p:last')
(3) 根据索引选择: $('p:eq(index)')
(4) 选取索引为奇数: $('p:odd')
(5) 选取索引为偶数: $('p:even')
(6) 选取索引大于某个数值:$('p:gt(2)')
(7) 选取索引小于某个数值:$('p:lt(2)')
(8)not 的使用: $('p:not(.class)') // 选取没有运用 class 样式
来源: http://www.bubuko.com/infodetail-2274943.html