①通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
获取属性
- 北京
- 天津
* attr和prop区别?
1. 如果操作的是元素的固有属性,则建议使用prop
2. 如果操作的是元素自定义的属性,则建议使用attr
②对class属性操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
* toggleClass("one"):
* 判断如果元素对象上存在class="one",则将属性值one删除掉。 如果元素对象上不存在class="one",则添加
4. css():
样式操作
id为one
id为two class是 mini
class是 mini
class是 one
class是 mini
class是 mini
class是 one
class是 mini01
class是 mini
span
1. append():父元素将子元素追加到末尾
对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
2. prepend():父元素将子元素追加到开头
对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
3. appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
4. prependTo():
对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头 5. after():添加元素到元素后边
对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
对象1.insertBefore(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系 9. remove():移除元素
对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。
对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
三种方式显示和隐藏元素:
参数:
1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
swing:动画执行时效果是 先慢,中间快,最后又慢
linear:动画执行时速度是匀速的
3. fn:在动画完成时执行的函数,每个元素执行一次。
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])
示例:
Insert title here
div显示和隐藏
js的遍历
for(初始化值;循环结束条件;步长)
JQuery的遍历
①jq对象.each(callback)
1. 语法:
jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element:就是集合中的每一个元素对象this:集合中的每一个元素对象
2. 回调函数返回值:
true:如果当前function返回为false,则结束循环(break)。
false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
示例:
$(function () {
citys.each(function (index,element) {
//1 获取li对象 第一种方式 this
//alert(this.innerHTML);
//alert($(this).html());
//2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)
alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
//判断如果是上海,则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false,则结束循环(break)。
//如果返回为true,则结束本次循环,继续下次循环(continue)
return true;
}
alert(index+":"+$(element).html());
});
});
- 北京
- 上海
- 天津
- 重庆
②$.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
- 北京
- 上海
- 天津
- 重庆
③for..of: jquery 3.0 版本之后提供的方式 :for(元素对象 of 容器对象)
for(li of citys){
alert($(li).html());
}
- 北京
- 上海
- 天津
- 重庆
jq对象.事件方法(回调函数);
注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
例如:表单对象.submit();//让表单提交
jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")
如果off方法不传递任何参数,则将组件上的所有事件全部解绑
jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
点击按钮变成绿色,再次点击红色
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
hide() 方法隐藏被选元素。(与 CSS 属性 display:none 类似。)
隐藏的元素不会被完全显示(不再影响页面的布局)。
语法:$(selector).show(speed,easing,callback)
这是一个段落。
当 DOM(document object model 文档对象模型)加载完毕且页面完全加载(包括图像)时发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。如上面的实例所示。
ready() 方法规定当 ready 事件发生时执行的代码。
提示:ready() 方法不应该与
一起使用。语法:
$(document).ready(function)
$(function)----ready() 方法只能用于当前文档,因此无需选择器
这是一个段落 。