博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery的简单介绍
阅读量:335 次
发布时间:2019-03-04

本文共 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没有简写; ( d o c u m e n t ) . r e a d y ( ) 可 以 简 写 为 (document).ready()可以简写为 (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/

你可能感兴趣的文章