jquery操作html项目经验总结

/******************************************************/
>jquery操作html项目经验总结
/******************************************************/

/****************************************/
0.jquery是个什么东西
写js的时间长了之后就觉得jquery有点像java中的sax解析xml一样
的爽,其实浏览器对象模型本来就是一个树结构的模型,只需要快速定位
到某个节点,然后对这个节点的属性进行轮番轰炸之后就到页面上去渲染,
真正用的熟的不是找到某个节点然后去设置属性而是能够知道里面设置的属性
是怎么渲染到我的模型上面去的.

1.如何把一个对象变成jquery对象
var person = {name:"xx",age:"xx"};
var jperson = $(person); //这个对象就是jquery的扩展体了

2.里面对于文档查找的高级方法(几乎所有的方法都很高级)
//$("#test1,#test2[id='xx']"); //复合选择器,加上属性选择器
//$("table > tbody > tr > td"); //层级查找
//$("table").find("tbody").children("tr");//多轮轰炸找到最后的节点
//$("table").parent("div");

3.元素事件绑定(群体绑定事件)
//$("table").click(function(eve){});

4.高级效果
//$("div").slideToggle(); //上下拉动效果
//$("div").fadeToggle();//淡入淡出效果
//$("div").toggle();//上下拉动

5.动态渲染的方法
//$("table").append("<tr></tr>"); //能够将你写的字符窜动态渲染到dom上
//$("table").before("test").after("after");

6.对于样式的操作
//$("table").css({
"width":"100px",
"height":"200px"
});
//$("table").addClass(className);
//$("table").removeClass(className);

6.jquery插件
//jquery-easyui  主要针对小控件的开发
//jquery-ui-customer 主要是一些小的控件
//jqgrid jquery表格插件
/****************************************/
7.html
7.1 iframe动态无刷新加载html网页
//<iframe id="content" width="825" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
//                            src="test.html"
//                            onload="iframeResize(this)">
//</iframe>
//比较高级的用法

7.2 模式对话框的传参
//window.showModalDialog("url",this,"dialogWidth:200px;dialogHeight:200px;");
//this为传给模式窗口的参数
//window.showModalDialog("accounterClass.jsp", this,'dialogHeight:150px;dialogLeft:323px;dialogTop:230px;dialogWidth:823px;');

7.3 html布局高级css样式属性
//盒子模型
//padding-top:内容与边框的距离(内边距)
//margin-top:被包含容器与容器的外边距(外边距)
//browser>document>body

//</body style="overflow-x:hidden;overflow-y:hidden;width:800px;height:200px;"> //body不出现滚动条
//<div style="width:825px;height:300px;overflow:scroll;text-overflow:clip;border:1px solid black;">
//因为div的高度和宽度都大于body的高宽所以会出现滚动条
//</div>
//</body>

//<table><tr><td width="20%"></tr></table>//设置表格单元的百分比布局
/******************************************************/