精华内容
参与话题
问答
  • jQuery

    2020-11-11 23:40:43
    jQuery 基础 简介 它的作者是 John Resig ,于2006年创建的一个开源项目 jQuery 是一个 JavaScript 库,它通过封装原生的 JavaScript 函数得到一整套定义好的方法 jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 ...

    jQuery

    基础

    简介

    它的作者是 John Resig ,于2006年创建的一个开源项目

    jQuery 是一个 JavaScript 库,它通过封装原生的 JavaScript 函数得到一整套定义好的方法

    jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能 。

    最大特点

    • 隐式迭代

      • 使用jq方法绑定事件,会自动将jq对象遍历出来并绑定事件

    • 链式调用

      • 每一次jq方法执行都会返回一个jq对象,前面最近的被操作的对象

    版本

    • 1.x.x

      • 支持IE5/6/7/8,自动处理兼容性问题

    • 2.x.x

      • 2013/4 不在支持 IE6/7/8,体积更小,速度更快

    • 3.x.x

      • jQuery 3.0运行在Strict Mode下

    jQuery和其他类库

    • YUI

      • 一套完备的、扩展性良好的富交互网页工具集

    • Prototype

      • 是最早成型的 JavaScript 库之一,对JavaScript 内置对象做了大量的扩展

    • Dojo

      • 提供其他库没有的功能。离线存储、图标组件等等

    • Mootools

      • 轻量的模块化和面向对象的 JavaScript 框架

    • ExtJs

      • 主要创建前端用户界面

    使用

    <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js”></script>

    <script>
    $(function(){
    js代码
    jquery搭配js
    })
    </script>

    jQuery执行时机

    只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码

    可以执行多次,第N次都不会被上 一次覆盖

    $(document).ready(function () {
    console.log(“jQuery中,当DOM节点加载完成后执行”)
    console.log(“可以多次执行”)
    });

    • $(function () { });

    代码风格

    jQuery 程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。

    类型切换

    • jQuery对象转js对象

      • 下标取值

      • [index]

      • .get(index)

      • .eq()

      • eq返回的还是jQuery对象

      • jQuery.fn.init [div#box, prevObject: jQuery.fn.init(1), context:
      document]

    • js对象转jQuery对象

      • $(‘js对象’)

    返回值

    • 无论是一个还是多个,获取的jQuery对象都是类数组,可以直接使用jq的方法,但是不能直接使用js方法

    • jQuery.fn.init(number)[xxx]

    链式调用

    • 链式调用,因为每一次jq方法执行都会返回一个jq对象(他自己操作的那个对象),所以能够链式调用

    类数组操作

    什么是类数组?

    只包含使用从零开始,且自然递增的整数做键名,并且定义了length表示元素个数的对象,我们就认为他是类数组对象

    方法

    children()

    • 获取前边匹配元素中 所有的子元素 组成的一个集合

    • 方法的参数是一个选择器 对获取的子元素进行筛选

    parent()

    • 获取集合中的父元素的集合

      • 注意只会关注自身父元素,与在哪没关系

    • 方法的参数是一个选择器 对获取的父元素进行筛选

    siblings()

    • 获取集合中,每一个元素的 的其他的兄弟元素

    find()

    • 在获取的元素集合中,去寻找后代元素,参数是一个选择器

    • find的选择器 只能最高从前边调用它的元素的开始获取

    • 这个表达式可以使用CSS1-3的选择器语法来写

    end()

    • 回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态

    prev()

    • 获取上一个兄弟元素 也可以进行筛选

    • prevAll()

      • 前面的所有

    next()

    • 获取下一个 兄弟元素 也可以进行筛选

    • nextAll()

      • 后面的所有

    选择器

    基本选择器

    #id

    • 根据给定的id匹配一个元素

    .class

    • 根据给定的类名匹配元素

    element

    • 根据给定的元素名匹配元素

    *

    • 匹配所有元素

    selector1,selector2,selector3…selectolrN

    • 将每一个选择器匹配到的元 素合并后一起返回

    • $(“div,span,.myClass”)

    层次选择器

    如果想通过 DOM 元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么用层次选择器

    $(“ancestor descendant”)

    • 选取 ancestor 元素里所有descendant (后代)元素

    • $(".box p")

    $(“parent>child”)

    • 选取 parent 元素下的child (子)元素

    • $(".box > p")

    $(“prev+next”)

    • 选取紧接在 prev 元素后的 next 元素

    • $(".box+div")

    $(“prev~siblings”)

    • 选取prev元素之后的所有siblings元素

    • $(".con1~")

    过滤选择器

    :first

    • 选取第1个元素

      • $(“ul li:first”)

    • 是所有匹配元素中的第一个

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0PwYnQxj-1605109202258)(media/c5ca2f6df84527c4bcf66a6c8facc185.png)]

    :first-child

    • 选取第1个子元素

      • $(“ul li:first-child”)

    • 所有匹配元素中 是他父级中的第一个的(不关注在不在数组中第几个,只关注父亲)

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgapzLuu-1605109202262)(media/c5ca2f6df84527c4bcf66a6c8facc185.png)]

    :nth-child()

    • 选取每个父元素下的第index(索引值为奇数/
      索引值为偶数/索引值等于某个表达式)个子元素,index 从1开始

    • 获取匹配的元素中 是父级的第x个子元素的,必须子元素,如果前面有别的则不会被选中

    • $(“ul li:nth-child(1)”)

    • index

    • even

    • odd

    • equation

    :nth-of-type()

    • 获取匹配的元素中 是父级的第一个子元素的,只要类型是就行

    • $(".box span:nth-of-type(3)")

    :eq(index)

    • 选取索引(从0开始)等于 index 的元素

    • eq就是下标 获取第index个

      • $(“ul li:eq(1)”)

      • $(“ul li”).eq(1)

    • eq获取的下标也是一个jq对象

    :last

    • 选取最后1个元素

      • $(“ul li:last”)

    :not(selector)

    • 去除所有与给定选择器 匹配的元素

      • $(“ul li:not(ul .li2)”)

      • $(“ul li:not(ul li:first-child)”)

    :even

    • 选取索引(从0开始)是偶数的所有元素

      • $(".outer li:even")

    :odd

    • 选取索引(从0开始)是奇数的所有元素

      • $(".outer li:odd")

    :gt(index)

    • 选取索引(从0开始)大于 index的元素

      • $(“ul li:gt(4)”)

    :lt(index)

    • 选取索引(从0开始)小于 index的元素

      • $(“ul li:lt(4)”)

    :header

    • 选取所有的标题元素

      • $(".box :header"),针对h标签

    :contains(你好)

    • 匹配包含给定文本的元素

      • $(“ul li:contains(你好)”)

    :empty

    • 选取不包含子元素或文本的空元素

      • $(“ul li:empty”)

    :has(selector)

    • 选取含有给定选择器 匹配的元素的元素

      • $(“ul:has(.li2)”)

    :parent

    • 选取含有子元素或文本的元素

      • $(“ul li:parent”)

    :only-child()

    • 选取只有唯一子元素的元素的子元素

      • $(“ul li:only-child”)

      • li是他父级的唯一一个子元素

    属性过滤选择器

    [attribute]

    • 拥有此属性的元素

    • $(“form input[name]”)

    [attribute=value]

    • 属性的值为value的元素

    • $(“form input[name=user]”)

    [attribute!=value]

    • 属性的值不等于value的元素

    • 子主题 2

    [attribute^=value]

    • 属性的值以value开始的元素

    [attribute$=value]

    • 属性的值以 value结束的元素

    [attribute*=value]

    • 属性的值含有 value 的元素

    [selector1][selector2]…[selectorN]

    • 匹配以上所有属性 选择器的元素

    表单选择器

    :enabled

    • 获取所有可用元素

      • $(“form input:enabled”)

    • 包含只读 不包含disabled禁用

    :disabled

    • 获取所有不可用元素

      • $(“form input:disabled”)

    :checked

    • 获取所有被选中的元素(单选框、复选框)

      • $(“form input[name=city]:checked”)

    :selected

    • 获取所有被选中的选项元素(下拉列表)

      • $(“form select option:selected”)

    :input

    • 获取选取所有的 input

      • $(“form :input”)

    只要用jQuery返回的就是jQuery.fn.init(1),伪数组

    动画

    显示和隐藏

    方法

    • show()

      • $("#show").click(function(){
      $(".con").show(“fast”,“linner”,function(){
      alert(‘Rolls-royce-wk’)
      })
      })

    • hide()

      • $("#hide").click(function(){
      $(".con").hide(“normal”,“swing”,function(){
      alert(‘Rolls-royce-wk’)
      })
      })

    • toggle()

      • 开就关,关就开

      • $(".con").toggle(1000)

    参数

    • 1.speed

      • 毫秒

      • $(".con").show(2000)

      • 字符串

      • slow

      • 600毫秒

      • fast

      • 200毫秒

      • normal

      • 400毫秒

      • 空或者误传就是默认

    • 2.easing

      • linear

      • 线性的

      • swing

      • 摇摆

    • 3.fn

      • 回调函数

    滑动和卷动

    参数同上

    sideUp()

    • 向上收缩(卷动)

    sideDown()

    • 向下展开(滑动)

    sideToggle()

    淡入和淡出

    参数同上

    fadeIn()

    • 淡入

      • $(".con").fadeIn(1000)

    fadeOut()

    • 淡出

      • $(".con").fadeOut(1000)

    fadeToggle()

    • 开关

      • $(".con").fadeToggle(1000)

    animate()

    在jQuery中,可以使用animate()方法来自定义动画,满足更多复杂多变的要求

    • $(".con").animate({
      width:“400px”,
      opacity:".5"
      },2000,function(){
      $(".con").css(“background”,“green”)
      })

    参数

    • 1.params

      • 一个包含样式属性及值的映射速度

    • 2.speed

      • 参数,可选

    • 3.callback

      • 在动画完成时执行的函数

    动画队列

    当多个动画连续调用的时候,其实动画是一起设置上去的,

    但是某个动画没有执行完成的时候,其他的动画要在动画队列中等待执行

    stop()

    很多时候需要停止匹配元素正在进行的动画,如果需要在某处停止动画,需要stop()方法

    • $(this).stop(true,false).animate({
      width:“500px”
      },1000)

    参数

    • 1.clearQueue

      • 控制是否清空当前动画队列

    • 2.gotoEnd

      • 控制当前被停止的动画 是否走到末尾

    stop()方法会结束当前正在进行的动画,并立即执行队列中的下一个动画

    delay()

    在动画执行过程,如果想对动画进行延迟操作,那么可以使用方法

    delay()方法允许我们将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列

    样式操作

    内容

    1.元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法

    2.内外边距和边框尺寸方法

    3.位置相关的方法

    方法

    css(name)

    • 获取某个元素的 CSS 样式

    • $(".box").css(“width”)

      • 返回值带单位

    css(name,value)

    • 设置某个元素行内的 CSS 样式

    • $(".box").css(“background”,“green”)

    css({name1 : value1, name2 : value2})

    • 设置某个元素行内多个 CSS 样式

    • $(".box").css({background:“green”,“font-size”:“20px”,color:“orange”})

    addClass(class)

    • 给某个元素添加一个 CSS 类

    • $(".box").addClass(“rolls”)

    removeClass(class)

    • 删除某个元素的一个 CSS 类

    • $(".box").removeClass(“rolls”)

    toggleClass(class)

    • 来回切换默认样式和指定样式

    • $(".box").toggleClass(“rolls”)

    width()

    • 获取某个元素的长度

    • $(".box").width()

      • 返回值不带单位

    width(value)

    • 设置某个元素的长度

    • $(".box").width(1000)

    height()

    • 获取某个元素的高度

    • $(".box").height()

    height(value)

    • 设置某个元素的高度

    • $(".box").height(800)

    innerWidth() /innerHeight()

    • 内容+内边距

    • $(".box").innerWidth()

    outerWidth() /outerHeight()

    • 内容+内边距+边框

    • $(".box").outerWidth()

    outerWidth(ture) /outerHeight(true)

    • 获取元素 内容+内边距+边框+外边距

    • $(".box").outerWidth(true)

    offset()

    • 获取元素到文档边缘的距离 返回是一个对象 left和top

    • 从元素边框外侧到文档边框内侧

    • $(".inner").offset()

      • {top: 114.66667175292969, left: 80}

    position()

    • 获取元素距离最近定位父级的距离 获取的是left和top的值

    • $(".inner").position()

      • {top: 20.000003814697266, left: 10}

    scrollTop() / scrollTop(value)

    • 获取/设置垂直滚动条的值

    scrollLeft() / scrollLeft(value)

    • 获取/设置水平滚动条的值

    • $(".inner").scrollLeft()

    • $(".inner").scrollLeft(500)

    DOM操作

    设置内容及属性

    html()

    • 获取元素中 HTML 内容

    • innerHTML

    • $(".box").html()

    html(value)

    • 设置元素中 HTML 内容

    • $(".box").html("<span>span</span>")

    text()

    • 获取元素中文本内容

    • innerText

    • $(".box").text()

    text(value)

    • 设置元素中文本内容

    • $(".box").text("<span>span</span>"),并不会解析,字符串而已

    val()

    • 获取表单中的文本内容

    • value

    • $(“input”).val()

    val(value)

    • 设置表单中的文本内容

    • $(“input”).val(“凯哥哥你好”)

    prop/attr(key)

    • 获取某个元素 key 属性的属性值

      • $(".box").attr(“study”)

      • $(".box").prop(“study”),读取不到非自有属性

    prop/attr(key, value)

    • 设置某个元素 key 属性的属性值

      • attr主要设置自定义的属性

      • $(".box").attr(“rolls”,“royce”)

      • prop主要设置自有的属性 和表单属性

      • $(".box").prop(“rolls”,“royce”),无效,只能设置自带属性

    prop/attr({key1:value2, key2:value2…})

    • 设置某个元素多个 key 属性的属性值

    removeattr(key)

    • 删除指定的属性

    • $(".box").removeAttr(“study”)

    $("<div></div>")

    传统的 JavaScript 方法,创建一个 div 元素节点:createElement()

    jQuery 中创建一个 div 元素节点 $("<div></div>");

    $("<div>新创建文本</div>")

    运用传统的 JavaScript 方法,创建div的文本节点createTextNode()

    jQuery 中创建一个 div 元素节点 $("<div>新创建文本</div>")

    attr( )

    运用传统的 JavaScript 方法,创建div的属性节点,我们可以使用setAttribute(name,value)

    jQuery 中创建div 的属性节点可以使用 attr( )方法,也可以直接写在创建的 div 中

    $("<li data-rolls:‘royce’>劳斯莱斯</li>").appendTo(".list")

    插入节点

    append(content)

    • 向指定元素内部后面插入节点 content

      • 子元素

    • $(".list").append($("<li data-rolls:‘royce’>劳斯莱斯</li>"))

    appendTo(content)

    • 将指定元素移入到指定元素 content 内部后面

    • $("<li>劳斯莱斯</li>").appendTo(".list")

    prepend(content)

    • 向指定元素 content 内部的前面插入节点

      • 子元素

    • $("<li data-rolls:‘royce’>劳斯莱斯</li>").prependTo(".list")

    prependTo(content)

    • 将指定元素移入到指定元素 content 内部前面

    • $(".list").prepend($("<li data-rolls:‘royce’>劳斯莱斯</li>"))

    after(content)

    • 向指定元素的外部后面插入节点 content

      • 兄弟

    • $(".list li").eq(2).after($("<li data-rolls:‘royce’>劳斯莱斯</li>"))

    before(content)

    • 向指定元素的外部前面插入节点 content

      • 兄弟

    • $(".list li").eq(2).before($("<li data-rolls:‘royce’>劳斯莱斯</li>"))

    insertAfter(content)

    • 将指定节点移到指定元素 content 外部的后面


      实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

    • $("<li data-rolls:‘royce’>劳斯莱斯</li>").insertAfter($(".list
      li").eq(2))

    insertBefore(content)

    • 将指定节点移到指定元素 content 外部的前面

    • $("<li data-rolls:‘royce’>劳斯莱斯</li>").insertBefore($(".list
      li").eq(2))

    removeChild()

    运用传统的JS方法,使用removeChild来删除一个节点

    删除节点 remove() 不带参数时,删除前面对象选择器指定的元素

    • remove() 本身也可以带选择符参数的

    • 清空节点 empty() 是用来删除掉节点里的内容

    $(".list li").eq(2).remove()

    replaceAll

    运用传统的JS方法,使用replaceChild来替换节点

    jQuery 中使用 replaceAll 的方法替换节点,节点被替换后,所包含的事件行为就全部消失了

    $("<li data-rolls:‘royce’>劳斯莱斯</li>").replaceAll($(".list li"))

    $("<li data-rolls:‘royce’>劳斯莱斯</li>").replaceAll($(".list li").eq(2))

    cloneNode

    运用传统的JS方法,使用cloneNode来复制节点

    jQuery 中使用 clone() 的方法复制节点

    clone(true) 参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来

    $(".list li").eq(2).clone()

    $(".list li").eq(2).clone(true).appendTo(".list")

    事件

    JavaScript 有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发

    为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件

    常见事件

    鼠标

    • click(fn)

      • 触发每一个匹配元素的 click(单击)事件

    • dblclick(fn)

      • 触发每一个匹配元素的 dblclick(双击)事件

    • mousedown(fn)

      • 触发每一个匹配元素的 mousedown(点击后)事件

    • mouseup(fn)

      • 触发每一个匹配元素的 mouseup(点击弹起)事件

    • mouseover(fn)

      • 触发每一个匹配元素的 mouseover(鼠标移入)事件

    • mouseout(fn)

      • 触发每一个匹配元素的 mouseout(鼠标移出)事件

    • mousemove(fn)

      • 触发每一个匹配元素的 mousemove (鼠标移动)事件

    • mouseenter(fn)

      • 触发每一个匹配元素的 mouseenter (鼠标穿过)事件

    • mouseleave(fn)

      • 触发每一个匹配元素的 mouseleave (鼠标穿出)事件

    键盘

    • keydown(fn)

      • 触发每一个匹配元素的 keydown (键盘按下)事件

    • keyup(fn)

      • 触发每一个匹配元素的 keyup (键盘按下弹起)事件

    文档

    • resize(fn)

      • 触发每一个匹配元素的 resize (文档改变大小)事件

    • scroll(fn)

      • 触发每一个匹配元素的 scroll (滚动条拖动)事件

    表单

    • focus(fn)

      • 触发每一个匹配元素的 focus (焦点激活)事件

    • blur(fn)

      • 触发每一个匹配元素的 blur (焦点丢失)事件

    • focusin(fn)

      • 触发每一个匹配元素的 focusin (焦点激活)事件

    • select(fn)

      • 触发每一个匹配元素的 select (文本选定)事件

    • change(fn)

      • 触发每一个匹配元素的 change (值改变)事件

    • submit(fn)

      • 触发每一个匹配元素的 submit (表单提交)事件

    事件对象

    对于原生事件对象,由于浏览器的差异,开发者总是需要做兼容性的处理;为了解决这个问题,jquery封装了自己的事件对象,解决了原生事件对象的兼容性问题,还另外提供了很多新的属性和方法。

    event.stopPropagation()

    • 这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消

    event. preventDefault()

    • 阻止默认行为

    绑定事件

    现在jQuery底层的事件绑定其实都是on,即使是旧的绑定方法,现在底层也是on绑定的

    旧的方法

    • bind()

      • bind()方法无法动态绑定尚未存在的元素

    • live()

      • jQuery1.4.3 版本中废弃了

    • delegate()

      • jQuery1.7 版本中被整合替代

    • 目前如果使用 底层用的都是on

    on绑定事件

    • 之前绑定事件的方法有三个。由于这三个的共存可能会造成一定的混乱, 为此
      jQuery1.7 以后推出了 .on() 方法彻底摒弃前面三个

    • 参数

      • 1.events

      • 事件类型

      • 2.selector

      • 触发事件的选择器元素的后代,事件委托对象(可选)

      • 3.data

      • 当一个事件被触发时要传递 event.data 给事件处理函数

      • 4.fn

      • 该事件被触发时执行的函数

    • on还可以多个事件绑定同一个函数、多个事件绑定不同函数

    off解绑事件

    • 之前解除绑定事件的方法有三个。由于这三个的共存可能会造成一定的混乱, 为此
      jQuery1.7 以后推出了 .off() 方法彻底摒弃前面三个

    • 参数

      • 1.events

      • 事件类型

      • 2.selector

      • 一个最初传递到 .on() 事件处理程序附加的选择器

      • 3.fn

      • 该事件被触发时执行的函数

    • 同addEventListen解除事件绑定一样

    one绑定事件

    • 不管是 .bind() 还是 .on() ,绑定事件后都不是自动移除事件,需要通过 .unbind()和
      .off() 来手工移除。jQuery 提供了 .one()
      方法,绑定元素执行完毕后自动移除事件,方法仅触发一次的事件。

    • 参数

      • 1.type

      • 添加到元素的一个或多个事件

      • 2.data

      • 将要传递给事件处理函数的数据映射

      • 3.fn

      • 每当事件触发时执行的函数

    扩展

    jQuery.extend()

    扩展jQuery类本身.为类添加新的方法

    // 为jQuery类添加类方法,可以理解为添加静态方法。
    jQuery.extend({
    min: function(a, b) {
    return a < b ? a : b;
    },
    max: function(a, b) {
    return a > b ? a : b;
    }
    });
    jQuery.min(2, 3); // 2
    jQuery.max(4, 5); // 5

    jQuery.fn.extend(object)

    给jQuery对象添加方法。jQuery.fn = jQuery.prototype

    • $.fn === $.prototype 只有实例化对象才能调用

    //就是为jQuery类添加“成员函数”。jQuery类的实例才可以调用这个“成员函数”。
    $.fn.extend({
    alertWhileClick: function() {
    $(this).click(function() {
    alert($(this).val());
    });
    }
    });
    //$("#input1")是jQuery的实例,调用这个扩展方法
    $("#input1").alertWhileClick();

    jQuery的$

    $.noConflict()

    • 主动交出$的控制权

    var NB = $.noConflict()

    • 交出控制权,但是我们还可以给他设置新的替代符号

    jQuery书写插件库

    插件名推荐使用 jquery.[插件名].js ,以免和其他 js 或者其他库相冲突;

    局部对象附加 jquery.fn 对象上,全局函数附加在 jquery 上;

    插件内部 this 指向是当前的局部对象;

    可以通过 this.each 来遍历所有元素;

    所有的方法或插件,必须用分号结尾,避免出现问题;

    避免插件内部使用 $ ,如果要使用,请传递 jQuery 进去

    each()方法

    jQ的原型对象上有each方法 实例化对象可以调用

    子主题 1

    jQ类上也有each方法 $.each

    子主题 1

    也可以用来遍历对象

    var arr = [“a”, “b”, “c”, “d”];
    var obj = {
    name: “lily”,
    age: “22”
    };
    $.each(arr, function (index, item) {
    console.log(item, index);
    })

    $.each(obj, function (index, item) {
    console.log(item, index);
    })


    $(“ul li”).each(function (index, item) {
    console.log(item, index);
    })

    alertWhileClick: function() {
    $(this).click(function() {
    alert($(this).val());
    });
    }
    });
    //$("#input1")是jQuery的实例,调用这个扩展方法
    $("#input1").alertWhileClick();

    jQuery的$

    $.noConflict()

    • 主动交出$的控制权

    var NB = $.noConflict()

    • 交出控制权,但是我们还可以给他设置新的替代符号

    jQuery书写插件库

    插件名推荐使用 jquery.[插件名].js ,以免和其他 js 或者其他库相冲突;

    局部对象附加 jquery.fn 对象上,全局函数附加在 jquery 上;

    插件内部 this 指向是当前的局部对象;

    可以通过 this.each 来遍历所有元素;

    所有的方法或插件,必须用分号结尾,避免出现问题;

    避免插件内部使用 $ ,如果要使用,请传递 jQuery 进去

    each()方法

    jQ的原型对象上有each方法 实例化对象可以调用

    子主题 1

    jQ类上也有each方法 $.each

    子主题 1

    也可以用来遍历对象

    var arr = [“a”, “b”, “c”, “d”];
    var obj = {
    name: “lily”,
    age: “22”
    };
    $.each(arr, function (index, item) {
    console.log(item, index);
    })

    $.each(obj, function (index, item) {
    console.log(item, index);
    })


    $(“ul li”).each(function (index, item) {
    console.log(item, index);
    })

    展开全文
  • 原作者地址:可以直接查阅个人觉得写得正是自己之前遇到的就转载了,喜欢的可以收藏最近在项目中需要用到RecyclerView嵌套RecyclerView实现复杂界面的需求,在测试中发现每次打开到该界面的时候,RecyclerView布局...

    原作者地址:可以直接查阅

    个人觉得写得正是自己之前遇到的就转载了,喜欢的可以收藏

    最近在项目中需要用到RecyclerView嵌套RecyclerView实现复杂界面的需求,在测试中发现每次打开到该界面的时候,RecyclerView布局都会自动滑动,而不是像正常一样显示到第一个Item的地方。

          通过查阅资料发现,当RecyclerView嵌套RecyclerView的时候,子RecyclerView会优先父RecyclerView而获得焦点,也即是说,内部RecyclerView抢占了焦点,从而导致每次打开到该页面时,布局会自动滚动到子RecyclerView的地方,从而导致了该现象的发生。

          这是一个关于父控件与子控件之间的焦点抢占问题,可以通过android:descendantFocusability属性的设置来解决,接下来也会解释android:descendantFocusability属性的用法。

        解决方法:通过在根布局设置 android:descendantFocusability="blocksDescendants" 来解决内部 RecyclerView 抢占焦点的问题,如下代码所示:(descendant中文意为:子节点、子控件)

    [html] view plain copy
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:background="@color/white"  
    6.     android:orientation="vertical"  
    7.     android:descendantFocusability="blocksDescendants">  
    8.     <android.support.v7.widget.RecyclerView  
    9.         android:id="@+id/recyclerview"  
    10.         android:layout_width="match_parent"  
    11.         android:layout_height="wrap_content"  
    12.         android:scrollbars="none" />  
    13. </LinearLayout>  

           android:descendantFocusability这个属性设置在我们平时开发中也很常见,下面参考官方文档对其用法进行解释,加深理解,以便更好地理解该属性的用法,日后再遇到相应的焦点抢占问题也可以很好解决了。

           android:descendantFocusability在官网上的定义如下:

           Defines the relationship between the ViewGroup and its descendants when looking for a View to take focus.

           从上面的定义中可以看出,android:descendantFocusability属性定义了父控件与子控件之间焦点获取的关系。

           在官网上同时也可以看到,android:descendantFocusability属性的取值由如下三种:

     

           通过上面各个属性值的描述,不难看出

           android:descendantFocusability=”afterDescendants”:子控件优先获得焦点,当没有任何一个子控件获取到焦点时(即子控件不需要获取焦点时),父控件才会获取到焦点;

           android:descendantFocusability=”beforeDescendants”:父控件会优先于子控件而获取到焦点;

           android:descendantFocusability=”blockDescendants”:父控件会阻塞子控件获取焦点,即父控件会覆盖子类控件而直接获得焦点(只有父控件获得焦点)。

          同时想起,以前在使用ListView或Recyclerview时,当ListView或RecyclerView的item布局中存在Button、ImageView、TextView等需要监听点击事件的控件时,由于子控件抢占了父控件的焦点,导致item布局点击没有反应,这也是很常见的一个开发问题,解决方法一样,在item的根布局中加入android:descendantFocusability=”blockDescendants”属性即可以解决子控件抢占父控件的焦点问题。

    展开全文
  • descendant_tree, 使用 d3.js 绘制子代家谱 在后代图表格式( 个人的所有后代) 中绘制家谱。单击 node 展开/折叠所有后代。还包括一个家庭书,它的中显示了同样格式的( 查看 book.html ) 数据。例如:...
  • 项目中一些使用xpath函数的复杂例子,记录于此 1. 使用starts-with //div[starts-with(@id,'res')]//table//tr//td[2]//table//tr//td//a//span[contains(.,'Developer Tutorial')] ...//div[starts-with(@id,'

    项目中一些使用xpath函数的复杂例子,记录于此

    1. 使用starts-with

    //div[starts-with(@id,'res')]//table//tr//td[2]//table//tr//td//a//span[contains(.,'Developer Tutorial')]

    2.使用contains和and

    //div[starts-with(@id,'res')]//table[1]//tr//td[2]//a//span[contains(.,'_Test') and contains(.,'KPI')]

    3.使用descendant

    //div[starts-with(@id,'res')]//table[1]//tr//td[2]//a//span[contains(.,'QuickStart')]/../../../descendant::img

    4.使用ancestor

    //div[starts-with(@id,'res')]//table[1]//tr//td[2]//a//span[contains(.,'QuickStart')]/ancestor::div[starts-with(@id,'res')]//table[2]//descendant::a[2]

    5.使用text()

    //span[@id='idHeaderTitleCell' and contains(text(),'QuickStart')]


    表达式 描述
    nodename 选取此节点的所有子节点。
    / 从根节点选取。
    // 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。
    . 选取当前节点。
    .. 选取当前节点的父节点。
    @ 选取属性。
    展开全文
  • 错误描述为:java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.起因:我想在Manifest中设置我的activity全屏,代码如下: android:name=".MainAc
    错误描述为:
    java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

    起因:
    我想在Manifest中设置我的activity全屏,代码如下:
            <activity
                android:name=".MainActivity"
                android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
                android:label="@string/app_name" >

    原因:
    从错误提示中提到Theme.AppCompat theme,这是因为我们的activity一定是继承了兼容包中的类,
    比如我这里就无意中继承了ActionBarActivity,它来自android.support.v7.app.ActionBarActivity。
    所以就要使用与其配合的AppCompat的theme才行。

    解决:
    1.根据提示来使用AppCompat的theme,如下:
            <activity
                android:name=".MainActivity"
                android:theme="@style/Theme.AppCompat.Light.NoActionBar"
                android:label="@string/app_name" >
    不过我要设置全屏,但我并没有找到,所以虽然错误不见了,但并没有达到我的预期。

    2.如果不是那么强烈需要继承自ActionBarActivity,就直接继承Activity吧。问题自然搞定!
    展开全文
  • 今天代码在 builder.show()出报出 You need to use a Theme.AppCompat theme (or descendant) with this activity. 通过看源码分析最后将 AlertDialog.Builder builder = new AlertDialog.Builder(activity); 改...
  • XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。 XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。 ...
  • descendant-or-self 轴(axis)包含上下文节点本身和该节点的后代节点 /AAA/XXX/descendant-or-self::* <AAA> ...
  • Scrapy框架学习--Selector提取数据1.Selector对象2.创建对象3.Xpath4. CSS选择器 1.Selector对象 ... BeautifulSoup lxml Scrapy综合上述两者优点实现了Selector类,基于lxml,反正我用的比之前的上述两种的提取舒服多...
  • 1、错误描述今天,想实现Activity不显示标题栏的效果,在项目的AndroidManifest.xml文件,对相应的Activity添加属性 android:theme="@android:style/Theme.NoTitleBar"具体代码如下:<activity android:name=".module...
  • CSS选择器 ... CSS选择器的语法比XPath简单一点,但功能不如XPath强大。实际上,当我们调用Selector的CSS方式时,在其内部会使用Python库cssselect将CSS选择器表达式翻译成XPath表达式,然后调用Selector对象的XPath...
  • 一、xpath介绍 XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。之前我们使用BeautifulSoup库构造soup对象,使用的 lxml 解析器,使用了Xpath语法。...
  • # scrapy-shell - scrapy shell教程 - shell  - 启动  - Linux: ctr+T,打开终端,然后输入scrapy shell "url:xxxx" (注意是 双引号)  - windows: scrapy shell "url:xxx"...
  • 前言 最近的一系列源码分析,都是基于一个错误,逐步深入源码。都是网上没有源码分析的报错,这个报错也是。 网络上有文章给出了有针对性的解决方案。我通过源码给出更普通的解决思路,这个问题,没有特定的解决方案...
  • Scrapy 爬虫学习

    2018-01-23 15:53:30
    scrapy shell "http://quotes.toscrape.com/page/1/" #windows系统必须使用双引号,否则报错ValueError: invalid hostname: 'http >>> response.css('title') #返回一个名为List的对象SelectorList,表示包含...
  • listviewexceptionthread bug信息: 10-16 17:27:20.250: D/AndroidRuntime(14662): Shutting down VM ...10-16 17:27:20.250: W/dalvikvm(14662): threadid=1: thread exiting with uncaught exception (group...
  • java.lang.IllegalArgumentException: parameter must be a descendant of this view at android.view.ViewGroup.offsetRectBetweenParentAndChild(ViewGroup.java:5336) at android.view.ViewGroup
  • descendant (后代)轴包含上下文节点的后代,一个后代是指子节点或者子节点的子节点等等, 因此descendant轴不会包含属性和命名空间节点. /descendant::* 选择文档根元素的所有后代.即所有的元素被...
  • XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。  XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。 ...
  • 【xpath】使用 descendant 定位子孙节点

    千次阅读 2019-06-20 14:46:38
    . . 我们在使用selenium 的xpath方式定位某个元素时,如果这个元素前半部分的路径是确定的,后半部分的路径不确定,并且其中有个img节点是...descendant 是子孙后裔的意思。 用这个办法的好处,就是不用管目标节点在...

空空如也

1 2 3 4 5 ... 20
收藏数 14,801
精华内容 5,920
关键字:

descendant