JQuery选择器知识框架学习笔记

JQuery选择器知识框架学习笔记，包括认识JQ；JQ选择器；JQ中对属性、样式、HTML内容、文本内容、值的操作；JQ中的事件；JQ中的筛选方法；JQ中DOM操作等内容。

JQuery选择器知识框架学习笔记

• 认识JQ
  • 1、什么是JQ，JQ是JavaScript的一个库。
  • 2、分两种类型：开发版（未压缩）和生产版（压缩）
  • 3、文档就绪函数
    • 1、原生 window.onload
      • 1、所有内容加载完毕后执行
      • 2、不能同时编写多个，只执行后者
    • 2、JQ--- $(document).ready()
      • 1、DOM结构加载完后执行
      • 2、可以执行多个
      • 3、简写 $(function(){....})
    • 3、JQ中的window.onload
      • 1、$(winow).load(function(){.....})
      • 2、$('div').load(function(){.....})
  • 4、DOM对象和JQ对象
    • 1、DOM对象
      • 1、DOM对象：var domDiv=document.getElementById('box')，domDiv即DOM对象。
      • 2、DOM对象只能使用原生JS方法
      • 3、DOM转JQ对象：用$(DOM对象) 包裹起来，就获得了JQ对象，就可以使用JQ方法。
    • 2、JQ对象
      • 1、JQ对象：var $domDiv=$(domDiv), 用JQ包装DOM对象后产生的即JQ对象，即$domDiv
      • 2、JQ对象一般使用JQ方法
      • 3、JQ对象转DOM对象
        • 1、[0], $domDiv[0]
        • 2、get(0),$domDiv.get(0)
• JQ选择器
  • 选择器一阶段
    • 基本选择器
      • # ID选择器---单个元素
      • . class选择器---集合元素
      • 标签选择器---集合元素
      • * 通配符选择器---集合元素
      • , 群组选择器---集合元素
    • 层次选择器
      • 后代选择器---集合元素
      • > 子元素选择器---集合元素
      • + 某元素后的相邻兄弟---集合元素
      • ~ 某元素后所有的兄弟元素---集合元素
  • 选择器二阶段
    • 过滤选择器
      • 基本过滤选择器
        • :first 选第一个元素---单个元素
        • :last 选最后一个元素---单个元素
        • :not(xx) 选某元素且不匹配xx ---集合元素----------参数接受任何类型的选择器
        • :even 选索引为偶数的(从0开始)---集合元素
        • :odd 选索引为奇数的(从0开始)---集合元素
        • :eq(x) 选索引为X的元素(从0开始)---单个元素
        • :gt(x) 选索引大于X的元素(从0开始)---集合元素
        • :lt(x) 选索引小于X的元素(从0开始)---集合元素
        • :focus选取当前获取焦点的元素---集合元素
      • 内容过滤选择器
        • :contains(x)选取含有文本x的元素$('div:contains("我")')---集合元素----参数是文本
        • :empty选取不包含子元素或文本的空元素$('div:empty')---集合元素
        • :has(x)选取含有选择器所匹配的元素的元素$('div:has(p)')---集合元素------参数接受任何类型的选择器
        • :parent选取含有子元素或者文本的元素$('div:parent')---集合元素
      • 可见性过滤选择器
        • :hidden选取所有不可见的元素$('div:hidden')---集合元素
        • :visible选取所有可见的元素$('div:visible')---集合元素
      • 属性过滤选择器
        • [attr]选取拥有此属性的元素$('div[id]')---集合元素
        • [attr=val]选取属性值为val的元素$('div[id=aaa]')---集合元素
        • [attr!=val]选取属性值不等于val的元素$('div[id!=ccc]')---集合元素
        • [attr^=val]选取属性的值以val开头的元素---集合元素
        • [attr$=val]选取属性的值以val结束的元素---集合元素
        • [attr*=val]选取属性的值含有val的元素---集合元素
        • [attr][attr]复合属性选择器---集合元素
      • 子元素过滤选择器
        • :nth-child(i) 选取每个父元素下第i子元素(i从1开始)----集合元素
        • :nth-child(even)选取每个父元素下偶数元素(从1开始)----集合元素
        • :nth-child(odd)选取每个父元素下奇数元素(从1开始)----集合元素
        • :nth-child(3n+1)选取每个父元素下符合3n+1的元素(从1开始)----集合元素
        • :first-child选取每个父元素的第一个子元素---集合元素
        • :last-child选取每个父元素的最后一个子元素---集合元素
        • :only-child选是父元素中唯一子元素的元素---集合元素
      • 表单对象属性过滤选择器
        • :enabled选取所有可用元素$('#form :enabled')---集合元素
        • :disabled选取所有不可用元素$('#form :disabled')---集合元素
        • :checked 选取所有被选中的元素$('input:checked')---集合元素
        • :selected选取所有被选中的选项元素$('select option:selected')----集合元素
    • 表单选择器
      • :input 选取所有的input\textarea\select\button元素---集合元素
      • :text 选取所有的单行文本---集合元素
      • :password选取所有的密码域---集合元素
      • :radio选取所有的单选---集合元素
      • :checkbox选取所有的多选---集合元素
      • :submit 选取所有的提交按钮---集合元素
      • :image选取所有的图像按钮---集合元素
      • :reset选取所有的重置按钮---集合元素
      • :button选取所有的按钮---集合元素
      • :file选取所有的上传域---集合元素
      • :hidden选取所有的不可见元素---集合元素
• JQ中对 属性 、样式、HTML内容、文本内容、值 的操作
  • JQ对属性的操作
    • 1、获取某属性 attr('某') ----$('div').attr('title')
    • 2、设置属性 attr('属性名','属性值')-----$('div').attr('title','div的标题')
    • 3、删除属性 removeAttr('属性名') ----$('div').removeAttr('title')
  • JQ方法对样式的操作
    • 1、获取某样式 $('div').css('color')
    • 2、设置某一个样式 $('div').css('color','#000')
    • 3、设置一组样式 $('div').css({'color':'#000','background':'blue'})
    • 4、获取class属性所有值 ---$('div').attr('class');
    • 5、设置class属性所有值---$('div').attr('class','active'); 替换方法，会删掉其他class
    • 6、样式追加addClass() ,且不会重复添加。---$('div').addClass('hover')
    • 7、移除所有样式removeClass(), 移除指定样式removeClass('hover')
    • 8、切换样式toggleClass()---$('div').toggleClass('active'); 没有则添加，有则删除。
    • 9、判断是否含有某样式，hasClass(),有返回true,没有返回false。$('div').hasClass('active');
  • HTML\文本内容\值
    • 1、html()----获取某元素的HTML内容，包括标签，包括文本内容。$('div').html();
    • 2、html('...')----设置某元素的HTML，$('div').html('<span>内容<span>')
    • 3、text()----获取某元素的内容，$('div').text();
    • 4、text('...')---设置某元素的内容....,$('div').text('我是内容');
    • 5、val()---获取表单元素的值，$('input').val();
    • 6、val('...')---设置表单元素的值,$('input').val('请输入用户名');
• JQ中的事件
  • 事件绑定，bind(type,[data],fn)
    • 绑定一个事件
    • 绑定多个事件一个处理程序
    • 绑定多个事件多个处理程序
  • 简写绑定事件即普通写法
  • 移除事件
    • 1、unbind() 没有参数 解绑该元素的所有绑定事件
    • 2、unbind(type) 解绑指定类型 事件
  • 常用事件
    • focus
      • focus()方法 使input元素获得焦点
      • focus( fn) 获得焦点事件
    • blur
      • blur() 方法，使元素失去焦点
      • blur(fn) 失去焦点事件
    • change 元素值发生改变时触发
      • 适用于文本域，下拉框等
    • mouseover、mouseout
      • 当鼠标指针位于元素上方时，会发生 mouseover 事件
      • mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发
    • mouseenter、mouseleave
      • 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
      • mouseenter 事件只有在鼠标指针进入被选元素时被触发
    • mousedown、mouseup
      • mousedown鼠标指针移动到元素上方，并按下鼠标按键时
      • mouseup当在元素上放松鼠标按钮时
    • mousemove
      • 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
    • resize
      • 当调整浏览器窗口大小时，发生 resize 事件。
    • scroll
      • 当用户滚动指定的元素时，会发生 scroll 事件。
    • select
      • 当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。
    • keydown
      • 当键盘键被按下时发生 keydown 事件。
    • keyup
      • 当键盘键被松开时发生 keyup 事件。
  • 合成事件
    • hover
      • hover(fn1,fn2) 鼠标一上去时触发函数fn1,移出来时触发函数fn2
    • toggle
      • 1、toggle(fn1,fn2,fn3) 已淘汰
      • 2、toggle() 切换显示和隐藏
      • 3、toggle([speed]) 在某速度下切换显示和隐藏的
      • 4、toggle([speed],fn) 切换显示和隐藏后调用fn函数
      • 5、toggle(true/false) 根据参数判断是显示还是隐藏
  • 事件对象
    • 1、什么是事件对象
      • 事件对象--是用来记录事件发生时的相关相信的对象
      • 事件发生时产生，事件结束时销毁
    • 2、JQ中的事件对象 function(event)
    • 3、事件对象常用属性
      • 1、event.type---获取事件的类型
      • 2、event.data---获取传递给事件的数据
      • 3、event.target---获取到触发事件的元素
      • 4、event.preventDefault() 阻止事件的默认行为
      • 5、event.stopPropagation()阻止事件冒泡行为
      • 6、enent.pageX和event.pageY 获取到光标相对于页面的X坐标或Y坐标
  • 事件冒泡
    • 1、什么是事件冒泡
    • 2、事件冒泡引发的问题
    • 3、阻止事件冒泡 event.stopPropagation()
    • 4、阻止默认行为 event.preventDefault
  • 主动触发
    • 1、tigger('click') 主动触发某某事件
    • 2、JQ默认事件可以简化写法 $('.box').click();
    • 3、触发自定义事件 $('.box').tigger('myFunc')
• JQ中的筛选方法
  • 1、过滤方法
    • eq(0) 获取当前链式操作中第N个
    • first()匹配的第一个元素
    • last()获取匹配的最后个元素
    • hasClass()检查当前的元素是否含有某个特定的类，如果有，则返回true。
    • filter()筛选出与指定表达式匹配的元素集合。
    • is() 方法用于查看选择的元素是否匹配选择器。
    • has()保留包含特定后代的元素，去掉那些不含有指定后代的元素。
    • not()not() 方法返回不符合一定条件的元素。
    • slice()slice() 方法选取基于索引的元素的子集。
  • 2、祖先查找
    • 1、closest() 方法返回被选元素的第一个祖先元素。
    • 2、parent() 方法返回被选元素的直接父元素。
    • 3、parents() 方法返回被选元素的所有祖先元素。
  • 3、后代查找
    • 1、children() 方法返回被选元素的所有直接子元素。
    • 2、find() 方法返回被选元素的后代元素。
  • 4、同胞查找
    • 1、next() 方法返回被选元素的后一个同级元素。
    • 2 、nextAll() 方法返回被选元素之后的所有同级元素。
    • 3、prev() 方法返回被选元素的前一个同级元素。
    • 4、prevAll() 方法返回被选元素之前的所有同级元素。
    • 5、siblings() 方法返回被选元素的所有同级元素。
• JQ中 DOM操作
  • 内部插入
    • 内部的后面
      • append() --------在......的里面的后面放........
      • appendTo()------把.......放到.......的里面的后面
    • 内部的前面
      • prepend()
      • prependTo()
  • 外部插入
    • 外部的前面
      • after() --------在.......的后面插入......
      • insertAfter()------把.......放.......后面
    • 外部的后面
      • before()-------在.....的前面插入.......
      • inserBefore()
  • 包裹
    • warp() ------把所有匹配元素 用.......结构 分别 包裹起来
    • warpAll()------把所有匹配元素 用....标记结构 一起包裹起来
    • warpInner()-------把每个匹配元素的子内容 用.....标签一起包裹起来
    • unwarp()------删除包裹，删除父级，不包括body
  • 替换
    • replaceWith()------讲匹配元素替换成.........(指定的HTML或DOM元素)
    • replaceAll()------用.......替换匹配的........
  • 删除
    • empty() 清空匹配的元素，即删除子元素
    • remove() 删除被选元素，及其子元素
    • detach() 删除被选元素，但是保留它的行为
  • 复制
    • clone() 克隆匹配到的元素
• JQ中的动画
  • 基本效果
    • show() 方法
      • 显示隐藏的被选元素
      • 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素
      • 不适用于通过 visibility:hidden 隐藏的元素
    • hide()
      • 隐藏被选元素。
    • toggle() 方法切换显示/隐藏
  • 滑动
    • slideDown() 方法以滑动方式显示被选元素
    • slideUp() 方法以滑动方式隐藏被选元素。
    • slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
  • 谈入谈出
    • fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
    • fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
    • fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
    • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
  • 自定义动画
    • animate() 方法执行 CSS 属性集的自定义动画。
    • stop() 方法为被选元素停止当前正在运行的动画。
    • delay() 方法对队列中的下一项的执行设置延迟。
    • finish() 方法停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。
• JQ对象访问
  • 1、each() 方法为每个匹配元素规定要运行的函数。
  • 2、size() 方法返回被 jQuery 选择器匹配的元素的数量。
  • 3、index() 方法返回指定元素相对于其他指定元素的 index 位置。
• 位置、尺寸
  • 1、offset() 方法设置或返回被选元素相对于文档的偏移坐标。
  • 2、position() 方法返回第一个匹配元素的位置（相对于它的父元素）返回的对象包含两个整型属性：top 和 left。
  • 3、scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
  • 1、width() 方法设置或返回被选元素的宽度。
  • 2、innerWidth() 方法返回第一个匹配元素的内部宽度。
  • 3、outerWidth() 方法返回第一个匹配元素的外部宽度。