jQuery利用选择器实现功能模块可见性的控制

简介:
复制代码
// 控制可见性
             if  (type  ==   " A " ) {
                $(
" .admincontitle " ).css( " display " "" );
                $(
" .Item_content " ).css( " display " "" );
            }
            
else  {
                $(
" #AHeader " ).css( " display " "" );
                $(
" #ATitle " ).css( " display " "" );
            }
            
if  (type  ==   " B " ) {
                $(
" #ATitle " ).replaceWith($( " #BTitle " ));
                $(
" #Bitle " ).css( " display " "" );
            }
            
else   if  (type  ==   " C " ) {
                $(
" #Aitle " ).replaceWith($( " #Citle " ));
                $(
" #CTitle " ).css( " display " "" );
            }
复制代码

 

主要用到的有:

1.ReplaceWith():

将所有匹配的元素替换成指定的HTML或DOM元素.

例如:

描述:

用第一段替换第三段,你可以发现他是移动到目标位置来替换,而不是复制一份来替换。

HTML 代码:
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果:
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

 

2.css(name,value):

在所有匹配的元素中,设置一个样式属性的值。

例如:

 

描述:

将所有段落字体设为红色

jQuery 代码:
$("p").css("color","red");




    本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/archive/2010/09/29/1838573.html,如需转载请自行联系原作者	




相关文章
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
31 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
41 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
36 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
26 3
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
31 1
|
4月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
36 1
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
46 0