jQuery知识点总结

Posted 2020-09-24

一、元素的增删改查

      1、增加

  a、append() 和 appendTo()  区别

append()：后边的加到前边的里边（后置插入）

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

  b、prepend()  和 prependTo() 区别

后边的加到前边的里边（前置插入）

          c、after()   和 before() 区别

后边的插入到前边的之后 

后边的插入到前边的之前

      2、删除

  a、remove 、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

 b、replaceAll() 方法

前边的替换后边的

      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”向右运动