Jquery搜索父元素操作方法?
使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多
这里jquery向上查找父元素 用到的方法:
closest() parents() parent()
向下查找子元素
用到的方法:find() children()
js用的是 children[] 属性 !
jquery中怎样根据父级找元素?
jquery中parent()可以获取父级元素,所以获得某元素父级的父级可以使用
$(selector).parent().parent();
示例如下
创建Html代码及css样式
class1
class2
class3
div{padding:10px 20px;border:4px solid #ebcbbe;}
div.class1{width:200px;height:120px;}
编写jquery代码
$(function(){
$("div.class3").click(function() {
obj = $(this).parent().parent();
alert(obj.prop('class'));
});
})
ajax三级联动实验目的?
查询数据库中的chinastates表,通过父级代号查询相应省市区.
实现界面:
在js页面实现三级联动
在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面)
用插件的形式,创建三个下拉列表
一、主页面:
View Code
二、在js页面实现三级联动
View Code
三、处理页面:
View Code
css什么时候造成重绘和回流?
回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流,就是在页面第一次加载的时候。
2. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。 注:从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。
任何对render tree中元素的操作都会引起回流或者重绘,比如 1. 添加、删除元素(回流+重绘) 2. 隐藏元素,display:none(回流+重绘),visibility:hidden(只重绘,不回流) 3. 移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素中。(重绘+回流) 4. 对style的操作(对不同的属性操作,影响不一样) 5. 还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)
关于这个问题,CSS会在以下情况下引起重绘和回流:
1. 当添加、删除、修改DOM节点时,会导致回流和重绘。因为这些操作可能会改变页面的布局和样式。
2. 当修改DOM元素的样式时,会引起重绘。例如修改元素的颜色、背景色、边框等。
3. 当浏览器窗口大小发生改变时,会触发回流和重绘。因为页面的布局会随着窗口大小的变化而改变。
4. 当获取某些属性值时,会引起回流。例如offsetWidth、offsetHeight、scrollTop等。
5. 当修改元素的位置属性(top、left、right、bottom)时,会触发回流。
6. 当修改元素的尺寸属性(width、height)时,会引起回流和重绘。
7. 当修改元素的文本内容时,会触发回流和重绘。因为文本的内容改变可能会导致元素的尺寸变化。
需要注意的是,回流比重绘代价更高,会更消耗性能。因此,应该尽量避免频繁地触发回流和重绘,可以通过合并多次修改、使用CSS动画代替JavaScript动画等方式来优化性能。