jQuery 속성의 활용(2부, 카테고리)_jquery

이 일련의 기사는 속성, 카테고리, Html 코드, 텍스트 및 값의 5개 기사로 구분됩니다.
이 문서에서는 addClass(클래스), 제거 클래스(클래스), 토글클래스(클래스)의 사용법을 설명합니다.
이 기사 시리즈에 대한 제안이나 의견이 있으면 sjzlgt@qq.com으로 이메일을 보내주세요.
jQuery 공식 웹사이트를 방문하면 jQuery에 대해 자세히 알아볼 수 있습니다.
.addClass(class) 사용법
정의: 일치하는 각 요소에 지정된 클래스 이름을 추가합니다.
반환 값: 객체
매개변수: 클래스(문자열): 요소에 추가할 하나 이상의 CSS 클래스 이름, 여러 개를 공백으로 구분하세요.
예: ID가 "div_a1"인 DIV ' redBorder' 클래스를 중앙의 모든 이미지에 적용합니다.
코드: $("#div_a1 img").addClass("redBorder");

2.removeClass(class) 사용법
정의: 일치하는 모든 요소에서 삭제 전체 또는 특정 클래스.
반환값: Object
매개변수: class(문자열): (선택) 삭제할 하나 이상의 CSS 클래스 이름, 여러 개를 공백으로 구분하세요.
인스턴스: "div_b1"의 ID 변경 ' DIV의 모든 이미지에 대한 redBorder' 클래스입니다.
코드: $("#div_b1 img").removeClass("redBorder");

3.ggleClass(class) 사용법
정의: 존재하는 경우(존재하지 않음) 존재) ) 클래스를 삭제(추가)합니다.
반환 값: 개체
매개 변수: 클래스(문자열): CSS 클래스 이름
인스턴스: ID가 "div_c1"인 DIV의 모든 이미지를 'redBorder' 클래스로 전환합니다. 코드: $("#div_c1 img").toggleClass("redBorder");

실행 후 jquery를 로드하려면 새로 고쳐야 합니다

<title>jQuery-속성-2</title> <style type="text/css"> .div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; background-color:#ccc; border:#999 1px solid; line-height:30px; font-size:13px; font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} .redBorder{border:Red 1px solid; padding:1px;} </style> <div class="div"> <div style="width:100%; text-align:center; font-size:16px; font-weight:bold;"> </div>jQuery 속성 사용( 2. 카테고리 기사)<br> 이 시리즈의 기사에서는 주로 jQuery 프레임워크의 속성(Attributes)을 사용하는 방법에 대해 설명하며 단순성과 포괄성을 바탕으로 예제를 통해 설명할 것이며 이에 대해서는 다루지 않을 것입니다. 나의 학습 방법은 매우 깊습니다. 먼저 시작한 다음 발전하세요! <br> 이 일련의 기사는 속성, 카테고리, Html 코드, 텍스트 및 값의 5개 기사로 구분됩니다. <br> 이 문서에서는 addClass(클래스), 제거 클래스(클래스), 토글클래스(클래스)의 사용법을 설명합니다. <br> 이 기사 시리즈에 대한 제안이나 의견이 있는 경우 이메일(sjzlgt@qq.com)로 보내주십시오. <a href="http://jquery.com/" target="_blank"> jQuery에 대해 자세히 알아보려면 </a>jQuery 공식 웹사이트<br>를 방문하세요. <span style="color:Red;"> <strong><a href="http://www.cnblogs.com/bynet/" target="_blank">저작권: code-cat 블로그:</a>http://www.cnblogs.com/bynet</strong> 전재 시 원저작자, 출처, 저작권 정보를 꼭 지켜주세요! </span> </div> <div class="div"> <span class="xiaobiao"> </span>1. addClass(클래스) 사용법<br><br> 정의: 지정된 클래스 이름을 일치하는 각 요소에 추가합니다. <br> 반환값: 객체<br> 매개변수: class(문자열): 요소에 추가할 하나 이상의 CSS 클래스 이름, 여러 개일 경우 공백으로 구분하세요. <br> 예: ID가 "div_a1"인 DIV의 모든 그림에 'redBorder' 클래스를 추가합니다. <span style="border:blue 1px solid;"> <span style="color:green;">코드: $("#div_a1 img").addClass("redBorder");</span> //버튼을 클릭하면 효과를 볼 수 있습니다</span><div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> <br> DIV ID="div_a1"<img id="img_1" name="img_bky" src="http://www.cnblogs.com/images/logo_small.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <img id="img_2" name="img_yh" src="http://news.cnblogs.com/images/logo/yahoo.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <br> <input type="button" id="btn_1" value="按钮一" class="button"> <br> </div> </div> <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#btn_1").click(function(){ $("#div_a1 img").addClass("redBorder"); }); </script> <div class="div"> <span class="xiaobiao">2. removeClass(class)用法</span><br> 定义：从所有匹配的元素中删除全部或者指定的类。<br> 返回值：Object<br> 参数：class (String) : (可选) 一个或多个要删除的CSS类名，多个请用空格分开<br> 实例：将ID为"div_b1"的DIV中第所有图片删除 'redBorder' 类 。<br> <span style="border:blue 1px solid;">代码： $("#div_b1 img").removeClass("redBorder");<span style="color:green;"> //点击按钮二看效果</span></span> <div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> DIV ID="div_b1"<br> <img id="img1" class="redBorder" name="img_bky" src="http://www.cnblogs.com/images/logo_small.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <img id="img2" class="redBorder" name="img_yh" src="http://news.cnblogs.com/images/logo/yahoo.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <br> <input type="button" id="btn_2" value="按钮二" class="button"><br> <script type="text/javascript"> $("#btn_2").click(function(){ $("#div_b1 img").removeClass("redBorder"); }); </script> </div> </div> <div class="div"> <span class="xiaobiao">3. toggleClass(class)用法</span><br> 定义：如果存在（不存在）就删除（添加）一个类。<br> 返回值：Object<br> 参数：class (String) :CSS类名<br> 实例：将ID为"div_c1"的DIV中第所有图片切换 'redBorder' 类 。<br> <span style="border:blue 1px solid;">代码： $("#div_c1 img").toggleClass("redBorder");<span style="color:green;"> //点击按钮三看效果</span></span> <div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> DIV ID="div_c1"<br> <img id="img3" class="redBorder" name="img_bky" src="http://www.cnblogs.com/images/logo_small.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <img id="img4" name="img_yh" src="http://news.cnblogs.com/images/logo/yahoo.gif" style="max-width:90%" style="max-width:90%" alt="jQuery 속성의 활용(2부, 카테고리)_jquery" border="0"> <br> <input type="button" id="btn_3" value="按钮三" class="button"><br> <script type="text/javascript"> $("#btn_3").click(function(){ $("#div_c1 img").toggleClass("redBorder"); }); </script> </div> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

源码打包下载