1day-jquery
1. 1 jQuery
1概念
* JavaScript(ECMA/DOM/BOM)在实际开发中，使用比较麻烦，有浏览器兼容问题。
* JavaScript类库(JS库) 的目的是为了简化js中的开发，
实现使用js中的函数和对象进行封装。我们只需要掌握如何使用，不需要了解如何实现。
目前最火的是jQuery。可以去Github网站看 Star。
2 jQuery目前版本：
* 1.x版本 - 几乎兼容所有浏览器
* 2.x版本 - 不再兼容IE所有浏览器
* 3.x版本 - 不再兼容IE8之前的版本
3四个模块：（我们学习前两个）
* jQuery - 针对PC端浏览器
* jQuery UI - 针对样式
* jQuery Mobile - 针对移动端浏览器
* Qunit - 针对前端测试
4 jQuery基本用法：
使用步骤：1，引入jQuery文件，写在<head>标签中。在逻辑代码实现之间实现之前引入即可。
2，通过jQuery获取页面元素 —— 选择器
3，通过jQuery提供的属性或方法完成需要。
5工厂函数：$（）等价于jQuery（）注意：它们作为jQuery的入口
返回值: 是jQuery对象;
用法：① 通过选择器获取HTML页面中指定元素，
② 将DOM对象转换为jQuery对象。
6符号$: 通过jQuery底层代码的查看，$（）等价于jQuery（）
目的：为了简化操作。
7 jQuery对象和DOM对象
* DOM对象 - 通过DOM提供的属性或方法获取的页面元素。
* jQuery对象 - 通过对DOM对象的封装产生的对象。
*但是 jQuery的底层还是DOM内容。
jQuery对象和DOM对象相互转换
① DOM对象转换为jQuery对象
通过jQuery的$()工厂函数。
jQuery的内容 - jQuery对象
通过jQuery获取的变量名 - 增加前缀"$"
② jQuery对象转换为DOM对象
jQuery对象是类数组对象，可以通过索引值转换成DOM对象。
jQuery对象提供了get(index)方法。
注意：在实际开发中，DOM和jQuery可能混合使用。
1.2 选择器
1 概念
jQuery与CSS的选择器的区别
* jQuery的选择器用法是源于CSS选择器的用法
* jQuery的选择器扩展了CSS的选择器
2 九大选择器
1 基本选择器
2 层级选择器
3 过滤选择器 - 前缀 : + 选择器
3 基本过滤选择器
4 内容过滤选择器
5 可见性过滤选择器
6 属性过滤选择器
7 子元素过滤选择器
8 表单对象属性过滤选择器
9 表单选择器
3 注意
* 数量众多 -> 记不住(不要死记硬背)
* 单个使用 -> 非常简单
* 混合使用 -> 实际开发(层级关系不清楚，没有标准答案)
4 jQuery具有完善的处理机制
jquery当获取页面元素失败时
TODO * 注意 - 并不抱错，而是返回 undefined
TODO * 问题 - 将错误做了预处理
TODO * 好处 - 具有相对完善的处理机制
TODO * 坏处 - 很难判断错误的位置和原因
5 表格隔行变色
TODO 通过jQuery查询页面的元素时
TODO * 切忌 - 不要反复查询
TODO $('#data>tbody>tr:odd')
TODO $('#data>tbody>tr:even')
TODO * 建议 - 查询数据的缓存
TODO 先将查询结果存储在一个变量中
TODO 再基于以上查询结果，继续操作
TODO var trs = $('#data>tbody>tr');
$('#data>tbody>tr:odd').css('background','blue');
2.1 选择器
2.1.1基本选择
1 改变背景颜色 - 通过 CSS 操作实现
TODO * 提供了 css(attrName, attrValue) 方法
TODO * attrName - 表示 CSS 的样式名称
TODO * attrValue - 表示 CSS 的样式值
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
//选择 class 为 mini 的所有元素
// TODO 匹配多个元素时，不需要循环操作 - jQuery底层做了预处理
$('.mini').css('background','lightblue');
//选择 元素名是 div 的所有元素
$('div').css('background','lightblue');
//选择 所有的元素
$('*').css('background','lightblue');
//选择 所有的span元素和id为two的div元素
// TODO 组合选择器，中间用逗号隔开 - 并集
$('span,#two').css('background','lightblue');
}
2.1.2层级选择器
var btn1 = document.getElementById('btn1');
btn1.onclick = function(){
//选择 body内的所有div元素.
TODO 根据祖先元素 -> 查找后代元素
$('body div').css('background','pink');
//在body内的选择元素名 是 div的子元素.
TODO 根据父元素 -> 查找子元素
$('body>div').css('background','pink');
//选择 所有id为one 的下一个div元素.
TODO 根据目标元素 -> 查找下一个兄弟元素
$('#one+div').css('background','pink');
//选择 id为two的元素后面的所有div兄弟元素.
TODO 根据目标元素 -> 查找后面所有兄弟元素
$('#one~div').css('background','pink');
}
2.1.3基本过滤选择器
//选择第一个div元素.
var btn1 = document.getElementById('btn1');
btn1.onclick = function(){
$('div:first').css('background','red');
//选择最后一个div元素.
$('div:last').css('background','red');
//选择class不为one的 所有div元素.
// TODO class不为one - 包含没有class属性的元素
$('div:not(.one)').css('background','red')；
//选择 索引值为偶数 的div元素
$('div:even').css('background','red');
//选择 索引值为奇数 的div元素。
$('div:odd').css('background','red');
//选择 索引等于 3 的元素
$('div:eq(3)').css('background','red');
//选择 索引大于 3 的元素
// TODO great than
$('div:gt(3)').css('background','red');
//选择 索引小于 3 的元素
// TODO less than
$('div:lt(3)').css('background','red');
//选择 所有的标题元素.比如h1, h2, h3等等...
$(':header').css('background','red');
//选择 当前正在执行动画的所有元素.
// TODO 添加动画效果slideToggle属性代表执行动画的效果
function animate(){
$('#mover').slideToggle('slow',animate);
}
animate();
var btn10 = document.getElementById('btn10');
btn10.onclick = function(){TODO 动画效果必须是jQuery实现的
$(':animated').css('background','red')； }
2.1.4内容过滤选择器
//选取含有文本"di"的div元素.
var btn1 = document.getElementById('btn1');
btn1.onclick = function(){
$('div:contains(di)').css('background','navajowhite');
//选取不包含子元素(或者文本元素)的div空元素. $('div:empty').css('background','navajowhite');
//选取含有class为mini元素 的div元素.
TODO parent:has(selector)
TODO * selector - 查找目标元素
TODO * :has(selector) - 包含目标元素的父级元素
TODO 结果 - 查找包含目标元素的指定父级元素$('div:has(.mini)').css('background','navajowhite');
//选取含有子元素(或者文本元素)的div元素. $('div:parent').css('background','navajowhite');
2.1.5可见性过滤选择器
// TODO 获取可见 div 元素
$('div:visible').css('background','lightgreen');
// TODO 获取不可见 div 元素
TODO 链式操作
TODO * jQuery提供的方法几乎返回jQuery对象
TODO * 好处 - 操作简便，代码量减少
TODO * 坏处 - 代码可读性降低，性能会降低 $('div:hidden').show(3000).css('background','lightgreen');
2.1.6属性过滤选择器
//选取含有 属性title 的div元素.
$('div[title]').css('background','red');
//选取 属性title值等于 test 的div元素.
$('div[title=test]').css('background','red');
//选取 属性title值不等于 test 的div元素.
// TODO 属性title值不等于 test - 包含没有title属性的div元素
$('div[title!=test]').css('background','red');
//选取 属性title值 以 te 开始 的div元素.
$('div[title^=te]').css('background','red');
//选取 属性title值 以 est 结束 的div元素.
$('div[title$=est]').css('background','red');
//选取 属性title值 含有 es 的div元素.
$('div[title*=es]').css('background','red');
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
// TODO 组合属性过滤选择器 - 不任何分隔 - 交集
$('div[id][title*=es]').css('background','red');
2.1.7子元素过滤选择器
//选取每个父元素下的第2个子元素
// TODO nth-child(index) - index从 1 开始
$('div:nth-child(2)').css('background','yellow');
//选取每个父元素下的第一个子元素
$('div:first-child').css('background','yellow')
//选取每个父元素下的最后一个子元素
$('div:last-child').css('background','yellow');
//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div:only-child').css('background','yellow');
2.1.8表单对象属性过滤选择器
TODO each(function(index, domEle){})
TODO * 参数 - 回调函数
TODO function(index, domEle){}
TODO * index - 表示循环遍历的索引值
TODO * domEle - (DOM对象)表示循环遍历过程中得到的每个元素
TODO jQuery.each(object, function(index,domEle){})
TODO * 被称为jQuery全局函数 - 都由jQuery对象调用
TODO * 参数
TODO * object - 表示循环遍历的对象或数组
TODO * callback - 表示回调函数
TODO function(index,domEle){}
TODO * index - 表示循环遍历的索引值
TODO * domEle - (DOM对象)表示循环遍历过程中得到的每个元素
2.2.1多选框选中的个数
//获取id为btn的元素,给它添加onclick事件
//获取name为check的一组元素,然后选取它们中选中(checked)的。
$('#btn').click(function(){
var items = $("input[name='check']:checked");
alert('选中'+ items.length);
})
2.2.2实现多页签切换效果
//方法一
$('#tab>li').click(function(event){
var $li = $(event.target);
var value = $li.val();
var $div = $('#content' + value);
$div.attr('style','z-index: 1;');
$div.siblings('div').removeAttr('style');
});//方法二
$('#tab>li').click(function(event){
var $div = $('#content'+event.target.value);
$div.attr('style','z-index:1;').siblings('div')
.removeAttr('style');
});
TODO 为 jQuery 绑定事件
TODO 获取当前点击的是哪个<li>
TODO 根据序号查找对应的div
TODO attr(name, value)属性操作
TODO 当前div的所有兄弟元素siblings(),removeAttr()清除样式
2.2.3动态列表效果
var $li = $('li:gt(5):not(:last)');//li标签从第六个开始到结束，不包括最后一个
$li.hide();//隐藏
$('a>span').click(function(event){
if($li.is(':hidden')){// 匹配返回true，否则返回false
$li.show();//显示
$this.text('ll');//绑定当前事件的元素，它的文本
}else{
$li.hide();//隐藏
$this.text(oo);
}
event.preventDefault();})
24day
23回顾第二十三天的内容:
* 概念
* JavaScript类库(JS库)
* 目的 - 为了简化JavaScript操作
* 实现 - 封装了函数和对象
* 作用 - 简化DOM操作，并且兼容各大浏览器
* jQuery
* 目前依旧是全球最火的JS库
* 两个文件
* 开发版本 - 用于学习和研究的
* 生产版本 - 用于实际开发的
* 目前版本
* 1.x版本 - 几乎兼容所有浏览器
* 2.x版本 - 不再支持IE浏览器
* 3.x版本 - 不再支持IE 8浏览器
* 具有模块
* jQuery - 针对PC端浏览器
* jQuery Mobile - 针对移动端浏览器
* jQuery UI - 针对UI组件
* QUnit - 针对前端测试
* 基础内容
* 如何使用jQuery
* 在<head>中通过<script>标签引入jQuery文件
* 通过jQuery的选择器定位页面元素
* 通过jQuery提供的属性或方法完成需求
* 工厂函数 - $()或jQuery()
* 用法 - 作为jQuery的入口
* 作用
* 传递jQuery的选择器定位页面中的元素
* 将DOM对象转换为jQuery对象
* 开发约定
* 当通过jQuery获取页面元素时
* 将其赋值给变量 - 在变量名增加前缀"$"
* DOM对象与jQuery对象
* 概念
* DOM对象 - 通过DOM操作获取页面的元素
* jQuery对象 - 封装DOM对象产生的对象(底层还是DOM对象)
* 相互转换
* DOM对象转换为jQuery对象 - $(DOM对象)
* jQuery对象转换为DOM对象
* jQuery对象是类数组对象 - jQuery对象[索引值]
* jQuery提供了get(index)方法
* 选择器
* 注意 - jQuery选择器与CSS选择器的关系(区别)
* 九大选择器
* 基本选择器
* 层级选择器
* 父元素与子元素的关系 - $('parent > child')
* 过滤选择器
* 基本过滤选择器
* 内容过滤选择器
* 属性过滤选择器
* 可见性过滤选择器
* 子元素过滤选择器 - 层级结构不明确
$('div :nth-child(2)') - 获取div父元素的第二个子元素
* 注意 - 冒号(:)前面增加空格
* jQuery官方帮助文档的说明
* $('div :nth-child(2)') - 获取div父元素的第二个子元素
* $('div:nth-child(2)') - 获取第二个div子元素
* 表单对象属性过滤选择器
* 表单选择器
24今天的内容:
* DOM操作
*1 基本操作
* html() - 相当于DOM中的innerHTML属性的作用
* html() - 获取指定元素的HTML代码内容
* html(html) - 设置指定元素的HTML代码内容
* text() - 相当于DOM中的textContent属性的作用
* text() - 获取指定元素的文本内容
* text(text) - 设置指定元素的文本内容
* val() - 相当于DOM中的value属性值的作用
* val() - 获取指定元素的value属性值
* val(value) - 设置指定元素的value属性值
* attr() - 相当于DOM中的getAttribute()和setAttribute()的作用
* attr(attrName) 获取属性- 等价于getAttribute()
* attr(attrName,attrValue) 设置属性- 等价于setAttribute()
* removeAttr(attrName)删除属性 - 等价于removeAttribute()
TODO removeClass()
TODO * 传参 - 删除指定样式
TODO * 不传参 - 删除所有样式
TODO toggleClass()方法
TODO * 当传递样式名称时
TODO * 判断指定元素没有指定样式 - addClass()
TODO * 判断指定元素具有指定样式 - removeClass()
TODO * 注意 - 不是两个样式之间的切换
TODO css()方法设置多个CSS样式时
TODO * 注意 - 这里设置的对象的格式
TODO 1. 设置样式值 - 不需要编写单位
TODO 2. 样式名称允许不加单引号或双引号
TODO 3. DOM直接操作CSS样式名称时 - 使用驼峰式命名
TODO hasClass(className)方法返回值true/false
TODO * 作用 - 判断指定元素是否含有指定样式
* 2样式操作
* 通过属性操作 - style或class属性
* attr()和removeAttr()方法
* 注意 - 设置属性(将原有样式删除，替换成新的样式)
* css()方法 - 直接操作CSS中的样式
* css() - 获取或设置一个CSS样式
* css(attrName,attrValue) - 设置指定的CSS样式
* css(attrName) - 获取指定的CSS样式
* css(options) - 同时设置多个CSS样式
* options - Object类型
* 针对class属性
* addClass(className) - 追加样式
* 注意 - 不会改变指定元素的原有样式内容
* removeClass() - 删除样式
* toggleClass(className) - 切换样式
* hasClass(className) - 判断是否含有指定样式
*3 遍历元素
* 祖先元素与后代元素
* 祖先元素 - parents()
* 后代元素 - find(expr)
* 父元素与子元素
* 父元素 - parent()
* 子元素 - children()
* 兄弟元素
* 上一个兄弟元素 - prev()
* 下一个兄弟元素 - next()
* 所有兄弟元素 - siblings()
后面所有兄弟元素 - $(target ~ element)
TODO 父元素
TODO * 没有传递任何参数时 - 父元素(唯一)
TODO * 注意
TODO * 传递正确的参数 - 正确
TODO * 传递与其父元素不匹配的表达式(选择器)
TODO * 结果 - 还是一个 jQuery 对象
TODO * jQuery 对象的 length 属性值为 0
TODO 祖先元素
TODO * 没有传递任何参数时
TODO * 结果 - 从父元素开始，直到页面的根节点<html>，所有的标签
TODO * 如果传递了参数时
TODO * 结果 - 在所有祖先元素中，进行筛选与表达式(选择器)相匹配的结果
TODO 子元素
TODO * 没有传递任何参数时 - 获取所有子元素
TODO * 传递了指定参数时 - 获取与表达式匹配的结果
TODO find() 方法
TODO * 参数 - 必选，表达式(选择器)
TODO * 作用 - 在指定元素中查找与表达式匹配的结果
*4 创建节点
* 元素节点 - $(HTML代码)
* 注意 - HTML代码必须是字符串类型
* 文本节点 - text()
* 属性节点 - attr()
* 5删除节点
* remove() - 删除哪个元素，哪个元素调用
* 结果 - 既删除自身元素，也删除所有后代元素
* empty() - 删除哪个元素，哪个元素调用
* 结果 - 删除所有后代元素，而保留自身元素
* 在实际开发中，适用于清空操作
* 6复制节点(了解)
* jQuery中的复制节点 - clone(boolean)
* boolean参数 - 表示是否复制事件
* 默认值为 false，不复制事件
var $copy = $('button').clone(true);//复制节点和功能
* DOM中的复制节点 - cloneNode(boolean)
* boolean参数 - 表示是否复制后代节点
* 默认值为 false，不复制后代节点
* 7插入节点
* 内部插入节点 - 父元素与子元素(向父元素插入子元素)
* append() - 插入在指定元素中的子元素列表的最后一个
* prepend() - 插入在指定元素中的子元素列表的第一个
* appendTo() - 与append()互为逆操作
* prependTo() - 与prepend()互为逆操作
* 外部插入节点 - 兄弟关系的元素(向指定元素插入前一个或后一个兄弟元素)
// TODO 将 append() 后面的元素作为子元素插入到 append() 前面的元素中的最后
//$('#tj').append($('#ms'));
// TODO appendTo()与append()互为逆操作
//$('#tj').appendTo($('#ms'));
// TODO 将 prepend() 后面的元素作为子元素插入到 prepend() 前面的元素中的最前
$('#tj').prepend($('#ms'));
// $('#tj').prependTo($('#ms'));
* before() - 插入在指定元素的作为前一个兄弟元素
* after() - 插入在指定元素的作为后一个兄弟元素
* insertBefore() - 与before()互为逆操作
* insertAfter() - 与after()互为逆操作
* 8替换节点
* 被替换元素.replaceWith(替换元素)
* 调用该方法的元素 - 被替换元素
* 传递的元素 - 替换元素
* replaceAll() - 就是颠倒了的 replaceWith()
替换.replaceAll(被替换)
* 9事件
* $(document).ready(function(){}) - 等价于 window.onload
* ready()
* 速度快 - 必须等待HTML页面的DOM结构加载完毕之后，再执行
* 具有简化写法
* $().ready(function(){})
* $(function(){}) - 实际开发
* 允许编写多个
* window.onload
* 速度慢 - 必须等待HTML页面所有的内容全部加载完毕之后，再执行
* 没有任何的简化写法
* 只能存在一个
* 与其他JS库冲突
* 问题 - 集中在"$"符号的使用权冲突
* 原则 - jQuery主动放弃"$"符号的使用权
* 两种情况
① 先引入jQuery文件 - $符号已经不是jQuery
1. 直接替换成 jQuery 来使用
2. 通过自调函数来解决
(function($){
// $ 依旧表示 jQuery 对象
})(jQuery);
3. 通过 ready() 方法来解决
jQuery(function($){
// $ 依旧表示 jQuery 对象
})
* 后引入jQuery文件 - $符号一定是jQuery
② jQuery.noConflict();
1. 通过自调函数来解决
(function($){
// $ 依旧表示 jQuery 对象
})(jQuery);
2. 通过 ready() 方法来解决
jQuery(function($){
// $ 依旧表示 jQuery 对象
})
* 后引入jQuery文件 - $符号一定是jQuery