码迷,mamicode.com
首页 > Web开发 > 详细

jQuery知识点总结

时间:2017-06-23 23:05:47      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:触发事件   span   提高   append   down   说明   取消   eal   yellow   

、元素的增删改查

      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;width: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;width:300px;height:300px”></div>

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

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

写出还需要设置的css js

5) animate()

6) “div”向右运动

jQuery知识点总结

标签:触发事件   span   提高   append   down   说明   取消   eal   yellow   

原文地址:http://www.cnblogs.com/Mousika/p/7071801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!