jQuery相关知识总结一
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
jQuery相关知识总结一的更多相关文章
- jQuery相关知识总结
1 encodeURIComponent(city)处理js传值乱码问题 2 总体概述 以后项目如果没有特殊情况,一般采用jQuery作为最基础的公共底层库. 另外对于前端的javascript相关的 ...
- jQuery相关知识
1.jQuery中$符号有何作用? $作为jQuery的别名,如$(document).ready() 即是 jQuery(document).ready() 2.jQuery选择器有哪几种? 基本选 ...
- accp8.0转换教材第9章JQuery相关知识理解与练习
自定义动画 一.单词部分: ①animate动画②remove移除③validity有效性 ④required匹配⑤pattern模式 二.预习部分 1.简述JavaScript事件和jquery事件 ...
- Jquery:小知识；
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- AJAX跨域调用相关知识-CORS和JSONP（引）
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- 移动WEB像素相关知识
了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...
- listener监听器的相关知识
从别人的博客上我学习了listener的相关知识现在分享给大家 1.概念: 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上 ...
- UIViewController相关知识
title: UIViewController 相关知识date: 2015-12-13 11:50categories: IOS tags: UIViewController 小小程序猿我的博客:h ...
随机推荐
- 让textarea和附近的文字居中对齐
textarea {display:inline-block;vertical-align:middle;}
- Idea调试显示切换数据源的设置
使用IDEA调试时,如果遇到相同方法会在编辑器上提示切换到哪个项目,因为手滑点了Disable,所以导致后来就不提示了,记录下设置方法.
- DOCKER 从入门到放弃（三）
使用docker create [image-name] 创建一个容器 创建一个nginx镜像的容器,由于没有指定各项参数,容器实用默认参数,创建后并不会启动,并将容器的ID输出到终端,如果本地没有镜 ...
- Web自动化之Headless Chrome编码实战
API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger ...
- Spring AOP的注解实现
适用场景: 记录接口方法的执行情况,记录相关状态到日志中. 注解类:LogMark.java package com.lichmama.spring.demo.annotation; import j ...
- mysql性能监控工具
参考文档: http://www.linuxidc.com/Linux/2012-09/70459.htm 1.记录慢查询SQL #配置开启 (linux)修改my.cnf: log-slow-que ...
- Java自学手记——struts2
struts2框架 struts2是一种基于MVC模式的框架,是在struts1的基础上融合了xwork的功能. struts2框架预处理了一些功能: >请求数据自动封装, >文件上传的功 ...
- 设计模式 - 观察者模式（JDK）
定义:观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新. 对象: 抽象主题角色:每个抽象主题角色都可以有任意数量的观察者.抽象主题提供可 ...
- 请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。 (provider: Named Pipes Provider, error: 40 - 无法打开到 SQL Server 的连接)
程序异常,错误信息:在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (pro ...
- java基础06 IO流
IO用于在设备间进行数据传输的操作. Java IO流类图结构: IO流分类 字节流: InputStream FileInputStream BufferedInputStream Output ...