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,如需转载请自行联系原作者	




相关文章
|
9月前
|
JavaScript 索引
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
163 2
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
111 5
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
120 0
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
157 0
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
210 5
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
JavaScript
jQuery 选择器
jQuery 选择器
89 3
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
100 1