jquery和js在页面中的使用.docVIP

Jquery+js在页面中的使用 这周更多的是在页面中尝试使用jquery和js丰富页面内容，增加页面用户体验。 目标：在文章列表页中增加添加新文章，列表内容折叠，批量编辑，单个编辑，批量删除，搜索，各个字段排序等。 点击“添加文章”，出现添加文章表单，点X关闭表单； 使用jquery： $(#add_news).click(function(){ //当点击id=add_news的div $(#news_form).show();//id=news_form的div显示 }); $(#news_x).click(function(){//当点击id= news_x的div $(#news_form).hide();//id=news_form的div隐藏 }); 单个新闻编辑：点击“编辑”，出现表单并把该相关新闻信息赋值进去； 使用js函数： onclick=news_edit({$vo.id},{$vo.title},{$vo.cate_id},{$vo.display},{$vo.ding}) 点击事件，将诸多参数传进news_edit函数，news_edit函数： function news_edit(id,title,cate_id,display,ding){ document.getElementById(news_form).style.display= block;//显示news_form编辑表单 document.news.id.value=id;//赋值id document.news.title.value=title; //赋值新闻标题 for(var i=0;idocument.news.news_category_id.options.length;i++) { if(document.news.news_category_id.options[i].value == cate_id) { document.news.news_category_id.options[i].selected = true; break; //循环表单控件select，通过value与cate_id使新闻分类选中该类别 } } if(display==0){document.news.display[0].checked = true;}else {document.news.display[1].checked = true;};//更改单选控件radio if(ding==0){document.news.ding[0].checked = true;}else {document.news.ding[1].checked = true;} content=document.getElementById(news_+id+_content).innerHTML; //由于内容部分含诸多html，不使用参数传导，采用取特定div赋值方法 KE.html(new_add_content, content); //将新闻内容赋值进ke编辑器（得使用ke给定的方法） document.news.action=__URL__/news_edit; //更改action值 }; 表格隔行折叠新闻内容，点击新闻标题行显示和隐藏 使用jquery： 首先表格class=“main_tab”输出时，标题行class=” row”,内容行display :none（隐藏），每个标题行下跟该新闻内容行；jquery如下： $(.main_tab tr.row).click(function(){//点击表格中class为row的行（标题行） var ulNode=$(this).next(tr); //获取该标题行next行（即该内容行） if(ulNode.css(display)==none){ $(.main_tab tr:not(.row)).css(display,none); ulNode.css(display,); //如果该内容行是隐藏的，则显示该内容行和隐藏其他所有内容行 }else{ $(.main_tab tr:not(.row)).css(display,none); //而如果该内容行是显示的，则隐藏所有的内容行 } }); 批量编辑新闻 使用js： 点击“批量编辑”，出现编辑表单，更改表单action，抓取多选控件checkbox选中的新闻id，使用“,”间隔赋值给编辑表单id的valu