zoukankan      html  css  js  c++  java
  • jQuery知识点总结

    、元素的增删改查

          1、增加

      aappend() 和 appendTo()  区别

    append():后边的加到前边的里边(后置插入)

    appendTo():前边的加到后边的里边

      bprepend()  和 prependTo() 区别

    后边的加到前边的里边(前置插入)

              c、after()   和 before() 区别

    后边的插入到前边的之后 

    后边的插入到前边的之前

          2、删除

      aremove 、empty 和 detach 方法的区别

    Remove:移除

    Empty:把元素内容清空

    Detach:删除后还保留原有的事件

          3、改

     a、replaceWith()

    后边的 替换前边的

     例:

    <div class="container">

      <div class="inner first">Hello</div>

      <div class="inner second">And</div>

       <div class="inner third">Goodbye</div>

    </div>

    $(‘.third').replaceWith($('.first'));

    执行完的结果是?And hellow

     breplaceAll() 方法

    前边的替换后边的

          4、以下选择器各列举五个

    基本选择器  

    Id

    Class

    *

    群组选择器

    直接名字

    层次选择器

    form>input  给定父元素里的所有子元素

    +  匹配紧接 给定元素 的某元素的所有元素

    Form~input

    说明: 匹配 form 元素之后的所有 input 元素.注意:是匹配之后 的元素,不包含该元素在内,并且input匹配的是和form同辈的 元素,其后辈元素不被匹配。

     

    基本过滤选择器 

     first()  last()  :even  :odd  :eq()  :lt(小于)  gt()

    属性选择器

    [class]    获取拥有某属性的所有元素  

      [class=a]  获取拥有某属性且属性值为某的所有元素   

    !=     获取拥有某属性但属性值不为某的所有元素

    ^=     获取拥有某属性  属性值以某开始的所有元素

    $=     获取拥有某属性  属性值以某结束的所有元素

    *=     获取拥有某属性  属性值有某的所有元素

    内容选择器

    :contains  获取含有某文本内容的元素

    :empty   获取文本为空且不包含后代的元素

    :has(span)    获取后代含有span的元素

    :parent   获取含有后代或内容的元素

    可见度选择器

    :hidden  选取不可见元素

    :visible  选取可见元素

    表单对象选择器

    :input  

    :text

    :password

    :radio

    :checkbox

     

    子元素过滤选择器

    p:nth-child(2)  从下标1开始  所有p标签的第二个

    :first-child   第一个

    :last-child   最后一个

    :only-child    

    父元素里边只有一个子元素

    二、节点遍历

    1、each() 方法

    三、包裹节点

    1、wrap()   找一个爹

    后边新建的包裹前边的东西(包括标签)

    2、unwrap()   删除一个爹

    删除自己的父级

    3、wrapInner() 把匹配的元素内容用一个元素包裹

     

    四、css的属性操作和样式操作。

    Attr  获取设置元素属性 

       removeattr  删除指定属性

    操作多个css样式

    .css({“background”:”red”,”color”:”yellow”})

     

    jquery事件

    1) <button>按钮1</button>,点击button按钮实现控制台输出“按钮1”,用三种方式绑定事件 .click()  on()  bind()

    2) 取消绑定事件的两种方法   以及有参数和没参数的区别

    3) <input type=”button” value=”按钮”>  点击按钮 输出事件名 :和 触发事件的元素:

    4) <a href=”www.baidu.com”>baidu</a> 写一个阻止a标签默认跳转的方法  event.preventDefault()

    5) 什么是冒泡,阻止冒泡,具体说明?

    冒泡:从最精确到最不精确 依次寻找;

    阻止冒泡:只找最精确的那个  event.stopPropagation()

    6) 事件委托是什么?事件委托有什么好处? delegate 与on  在书写上有什么区别

    把事件加到父级上  触发执行效果

    好处:减少事件注册,提高性能。

    委托元素名  事件名  函数

    事件名  委托元素名  函数

    7) 下面代码,用事件委托写一个输出li面内容

    <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

        <li>4</li>

    <li>5</li>

    </ul>

    $(“ul”).delegate(“li”,”click”function(){

    Alert($(this).html())

       })

    六、动画

    1、show() 、hide() 和 toggle() 方法

    显示   隐藏   切换

    2、slideDown() 、slideUp() 、slideToggle() 方法

    滑入  滑出  切换

    3、fadeIn、fadeOut、fadeToggle() 方法

    淡入 淡出  切换

    4、animate  stop delay 方法的使用

    动态的改变当前元素各种css属性

    七、看如下代码

    <div style=”background:red;300px;height:300px”></div>

    <button>隐藏</button>

    1)点击“按钮”的时候div变成隐藏并且“按钮”的内容变成“显示”,再点击“按钮”div显示,“按钮”内容变为隐藏,达到显示和隐藏来回切换

    Toggle  

    2) 按顺序写出淡入,淡出,淡入淡出切换

    3) fadeTo(参数1,参数2)   参数1和参数2分别j代表的什么

    1代表  变化时间   2代表  透明度

    4) 

    <div style=”background:red;300px;height:300px”></div>

    <button>显示</button><button>隐藏</button>

    点击显示的是后要求 div下来,点击隐藏的时候div上去

    写出还需要设置的css js

    5) animate()

    6) “div”向右运动

  • 相关阅读:
    java事件处理(贪吃蛇)
    九九乘法表
    使用文件包含指令include
    jsp页面的基本构成
    软件测试博客

    成功职业女性处世的10大秘诀
    再见啦,冬冬妹
    网摘——杜晓眼眼中的尹珊珊:什么都要,什么都要得到
    网摘——事关“工程师思维”
  • 原文地址:https://www.cnblogs.com/Mousika/p/7071801.html
Copyright © 2011-2022 走看看