本文共 5349 字，大约阅读时间需要 17 分钟。

jQuery

• jQuery是JavaScript库, 创建于2006年的开源项目. jQuery极大的简化了HTML文档操作, 事件处理, 动画和ajax等. https://www.jquery.com
• 开源
• 轻量级
• 强大的选择器
• 对DOM操作的封装
• 事件处理机制
• 完善的ajax
• 浏览器的兼容
• 链式操作
• 隐式迭代
• 丰富的插件支持
• 完善的文档

$(document).ready()

• 执行时机不同: window.onload在页面机构和资源加载完毕后调用, $(document).ready()在页面结构加载完毕后调用.
• window.onload只能写一个,多了会覆盖; $(document).ready()可以写多个,不会覆盖
• window.onload没有简写; $(document).ready()可以简写为$(function(){})

jQuery对象和原生对象

• 原生获取对象,获取的是DOM节点,可以直接使用原生方法.
• 使用jQuery获取的包装之后的对象,只能调用jQuery的方法.
• jQuery对象可以使用[index]或者get(index)转出原生对象, 原生对象使用$()包装成jQuery对象.

var box = document.getElementById('box');console.log(box);box.style.background = 'blue';// $(选择器)可以获取元素var $box = $('#box');console.log($box); // n.fn.init [div#box, context: document, selector: "#box"]console.log($box[0]); // div#boxconsole.log($box.get(0)); // div#box$box[0].style.backgroundColor = 'tomato';$box.get(0).style.backgroundColor = 'orange';// 原生对象使用$()包装成jQuery对象.console.log($(box)); // n.fn.init [div#box, context: div#box]

jQuery选择器

• 基本选择器: id选择器, class选择器, 标签选择器

var $li = $('li');console.log($li);var $five = $('.five');console.log($five);var $six = $('#six');console.log($six);$li.css('background', 'orange');$('.five').css('background', 'blue');$('#six').css('background', 'red');$('*').css('background', 'pink');// window document this 这三个不要加引号console.log($(window));console.log($(document));console.log($(this));

• 层次选择器: 后代选择器, 子元素, 相邻元素, 兄弟元素

$("ul h3").css('background', 'orange'); // 后代选择器$("ul>h3").css('background', 'red'); // 直接子元素$('#six+h3').css('background', 'pink'); // 相邻元素$('#six~h3').css('background', 'tomato'); // 兄弟元素

• 基本过滤器

$('li:first').css('background', 'blue'); // 第一个$('li:last').css('background', 'blue'); // 最后一个$('li:lt(3)').css('background', 'red'); // 下标小于3$('li:gt(3)').css('background', 'red'); // 下标大于3$('li:eq(3)').css('background', 'blue'); // 下标等于3var a = 3;$('li').eq(a).css('background', 'blue'); // 下标等于3$('li:even').css('background', 'tomato'); // 下标偶数$('li:odd').css('background', 'blue'); // 下标奇数$('li:not(.six)').css('background', 'pink'); // 排除类名是six的其余li

• 属性过滤器

$('li').css('background', 'orange');$("li[title]").css('background', 'orange'); // 具有title属性的li标签$('li[title=web]').css('color', 'red'); // 具有title属性并且属性值为web的li$('li[title!=web]').css('color', 'red'); // 选中title属性不是web的li$('li[title^=w]').css('color', 'red'); // 具有title属性并且是w开头的li$('li[title$=b]').css('color', 'red'); // 具有title属性并且是b结尾的li$('li[title*=w]').css('color', 'red'); // 具有title属性并且title属性值包含w的li

• 表单选择器

console.log($(':input')); // input元素console.log($(':text')); // 单行文本框console.log($(':password')); // 密码框console.log($(':radio')); // 单选框console.log($(':checkbox')); // 多选框console.log($(':file')); // 文件上传域console.log($(':submit')); // 文件上传域console.log($(':reset')); // 重置按钮

jQuery节点

// $('div').children().css('background', 'red'); // 子元素,不考虑后代元素// $('div').children('p').css('background', 'red'); // 子元素中的p,不考虑后代元素// $("#li3").next().css('background', 'red'); // 下一个// $("#li3").nextAll().css('background', 'red'); // 下面所有的兄弟元素// $("#li3").prev().css('background', 'red'); // 上一个// $("#li3").prevAll().css('background', 'red'); // 上面所有的兄弟元素// $('#li3').siblings().css('background', 'red'); // 兄弟元素// $('#li3').css('background', 'red').siblings().css('background', 'blue');// var a = 0;// $('li').eq(a).css('background', 'red').siblings().css('background', 'blue');// $('div').children('p').css('background', 'red'); // 直接子元素// $('div').find('*').css('background', 'red'); // 所有后代元素// $('div').find('p').css('background', 'red'); // 所有后代元素中找p标签// $('li').filter('.info').css('background', 'red'); // 具有info类名的li// $('li').not('.info').css('background', 'red'); // 类名不是info的li

属性操作

// 获取属性: jQuery对象.attr(属性名)// 设置属性: jQuery对象.attr(属性名, 属性值) / jQuery对象.attr(json)// 删除属性: jQuery对象.removeAttr(属性名)// console.log($('#box').attr('id'));// console.log($('#box').attr('class'));// $('#box').attr('id', 'idbox');// $('#box').attr({
   //     id: 'idhaha',//     class: 'classhaha'// });// $('#box').removeAttr('class');// 以下两种情况使用prop()// 1.当只添加属性名即可生效的属性// 2.属性值只存在true/false// $('input').attr('checked', 'checked');$('input').prop('checked', true);console.log($('input').prop('checked'));

class操作

// 添加类名: jQuery对象.addClass(类名)// 删除类名: jQuery对象.removeClass(类名)// 查找类名: jQuery对象.hasClass(类名) 返回Boolean// 切换类名: jQuery对象.toggleClass(类名) 有就删除,没有就添加// is(): 判断是否符合要求$('#box').addClass('classbox');$('#box').removeClass('classbox');console.log($('#box').hasClass('haha'));console.log($('#box').hasClass('xixi'));$('#box').toggleClass('haha');$('#box').toggleClass('haha');console.log($("#box").is('div'));console.log($("#box").is('p'));console.log($("#box").is('#box'));console.log($("#box").is('.box'));

css操作

// 获取样式: jQuery对象.css(样式名)// 设置样式: jQuery对象.css(样式名, 样式值) / jQuery对象.css(json)console.log($('div').css('width')); // 200pxconsole.log($('div').css('font-size')); // 20pxconsole.log($('div').css('fontSize')); // 20px$('div').css('width', '500px');$('div').css('width', 300);$('div').css('width', '100');$('div').css({    width: 300,    height: 300,    background: 'pink',    fontSize: 50});

操作内容

// 获取内容: jQuery对象.html() / jQuery.text()// 设置内容: jQuery对象.html(内容) / jQuery.text(内容)// 区别: html()可以识别标签, text()不可以识别标签console.log($('div').html());console.log($('div').text());$('div').html('这是em标签');$('div').text('这是em标签');

转载地址：http://itse.baihongyu.com/