一、元素的增删改查
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;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”向右运动