jQuery的简单介绍

jQuery

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

<!-- 引入线上的jQuery代码 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!-- 引入本地jQuery文件 -->
<script src="./js/jquery-1.12.4.min.js"></script>

$(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#box
console.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'); // 下标等于3

var 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')); // 200px
console.log($('div').css('font-size')); // 20px
console.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>这是em标签</em>');
$('div').text('<em>这是em标签</em>');