day25css方法 jquery效果樣式等操作

一、css方法（）

元素.css("樣式")//獲取樣式（可以獲取行內設定的樣式，也可以獲取上style裡設定的css樣式）

元素.css("樣式","值")//設定樣式

二、方法index（）獲取當前元素所有序列的下。標註：下標包含同級其它元素。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<p></p>

</ul>

</body>

</html>

<script

src="jquery.js"></script>

alert($("#id3").index());//4

alert($("#id3").index("li"));//3

</script>

三、運動（效果）方法：裡面都可以加slow，fast

1)基本 show();hide(); toggle（）跟show效果一樣

2）滑動 sideUp();sideDown(); sideToggle();

3)淡入淡出 fadeIn();fadeOut(); fadeToggle()

4）透明度 fadeTo("時間"，0.34（透明度）);

案例：二級導航

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

div{

width: 600px;

margin: auto;

margin-top: 100px;

}

ul{

list-style: none;

}

.oUl{

width: 600px;

}

.oUl>li{

width: 200px;

float: left;

}

.oUl>li a{

display: block;

text-align: center;

line-height: 30px;

box-shadow: 1px 2px 2px 1px brown;

}

.oUl>li a:hover{

background: saddlebrown;

color: white;

}

.oUl>li ul{

border: 1px solid salmon;

background: #CCCCCC;

display: none;

}

.oUl>li ul li{

line-height: 30px;

text-align: center;

}

.oUl>li ul li:hover{

background: sandybrown;

}

</style>

</head>

<body>

<div>

<p></p>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

</script>

$(function(){

$(".oUl>li").mouseover(function(){

//this是一個DOM物件，不能用this來呼叫jquery中方法

//index()可以獲取元素下標

var index=$(this).index(".oUl>li");

// $(".oUl li ul:eq("+index+")").css("display","block");

// $(".oUl li ul:eq("+index+")").show(500);

// $(".oUl li ul:eq("+index+")").stop().slideDown("fsat");

$(".oUl li ul:eq("+index+")").fadeIn();

// $(".oUl li ul:eq("+index+")").fadeTo("100",0.8);

})

$(".oUl>li").mouseout(function(){

var index=$(this).index(".oUl>li");

// $(".oUl li ul:eq("+index+")").css("display","none");

// $(".oUl li ul:eq("+index+")").hide(500);

// $(".oUl li ul:eq("+index+")").stop().slideUp("fast");

$(".oUl li ul:eq("+index+")").fadeOut();

// $(".oUl li ul:eq("+index+")").fadeTo("100",0);

})

四、js物件與jq物件互相轉換

DOM物件轉成jquery物件：$(DOM物件);

jquery物件轉成js物件(轉成jquery物件設定樣式必須按照js中的格式去設定)

方案一： $()[下標]

$("#box")[0].style.color = "blue";

方案二： $().get(下標)

$("#box").get(0).style.color = "blue";

$(DOM物件).(不用加on)事件（function(){

程式碼塊；

}）;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

box

</div>

</body>

</html>

//$("#box").css("color","red");

$("#box")[0].style.color = "blue";

$("#box").get(0).style.color = "blue";

$(document).ready(function(){})；

window.onscroll = funciton(){

}//js物件

$(window).scroll(function(){

})//jquery物件

</script>

五、篩選選擇器

<body>

<ul>

</ul>

<ul>

</ul>

</body>

1）eq（index|-index）；

$("li").eq(3).css("color","red");

2）first()

$("li").first().css("color","red");

頁面中所有li元素中的第一個

3）last()

$("li").last().css("color","red");

頁面中所有li元素中的最後一個

4）hasClass(class) 返回true

$("li").mouseover(function(){

if($(this).hasClass("a")){

$(this).css("color","red");

}

})

5）filter() 過濾滿足條件的

$("li").filter(function(index){

return index==2;

}).css("color","blue");

6）is（）

alert($(".a").is("a"));//false

7）not()

$("li").not(".a").css("color","blue");

8）slice（）

$("li").slice(2,3).css("color","red");

六、查詢選擇器

<body>

<ul>

</ul>

</body>

1）children（）

$("ul").children("li").css("color","red");

2）find（）

$("ul").find("li").css("color","red");

3）next（）有問題

4）nextAll（）

$("li").nextAll().css("color","red");

5）nextUnit（）

$(".a").nextUntil(".b").css("color","red");

6）siblings（）

$(".a").siblings().css("color","blue");

七、樣式操作

為元素新增一個樣式類

$("#box").addClass("box");

沒有class屬性則直接新增；有的話，就在後面新增一個（不會覆蓋原來屬性值）

如：class=“box a”；

2)刪除樣式類

$("#box").removeClass("a");

後來新增的樣式也可以刪除。原先在行內新增的樣式類也可以刪除

案例siblings()實現選項卡功能

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

list-style-type: none;

}

.warp{

width: 360px;

height: 400px;

border: 1px solid #b6b6b6;

margin: 50px auto;

}

#btn{

width: 360px;

height: 40px;

}

#btn li{

float: left;

width: 118px;

margin: 0 1px;

background: #ddd;

height: 40px;

line-height: 40px;

text-align: center;

}

#btn .active{

background: #b6b6b6;

}

#show{

width: 360px;

height: 460px;

}

#show li{

width: 360px;

height: 460px;

display: none;

}

</style>

</head>

<body>

<div>

</ul>

</ul>

</div>

day25css方法 jquery效果樣式等操作

一、css方法（）元素.css("樣式")//獲取樣式（可以獲取行內設定的樣式，也可以獲取上style裡設定的css樣式）元素.css("樣式","值")//設定樣式二、方法index（）獲取當前元素所有序列的下。標註：下標包含同級其它

QTableWidget去除表格虛線框，設定表格樣式等操作

QTableWidget去除表格虛線框: class NoFocusDelegate : public QStyledItemDelegate { Q_OBJECT public: NoFocusDelegate(){}; ~NoFocusDelegate(){}; void NoF

jQuery的節點添加、刪除、替換等操作

fun 插入 before pla 等於 () appendto tle 事件 //幾種添加節點的方法 //$("p").append("<b>你好嗎？</b>");//向p元素中追加《b》 //$("<b>你好嗎？</b>"

jQuery學習之------元素樣式的操作

ise 偶數 class add fun order 布爾值 ebe 對象 jQuery學習之------元素樣式的操作一、.addClass( className )方法----增加樣式 1.addClass( className ) : 為每個匹配元素所要增加的一個或

jQuery 效果 - slideToggle() 方法

產生效果之間 nta ogg 們的我們 ide 可見實例通過使用滑動效果，在顯示和隱藏狀態之間切換 <p> 元素： 1 $(".btn1").click(function(){ 2 $("p").slideToggle(); 3 }); 定義和

jQuery實現的ajax操作（最常用的json方法）

add mage jquer clas load rgba 方法 htm 9.png load(url, [data], [callback])1 獲取HTML傳輸格式的數據： load(url, [data], [callback]) （可以設置選擇器）2 獲取xml傳

python連線MongoDB資料庫方法及增刪改查等操作小結。

Y9 建議安裝MongoDB視覺化工具“Robo 3T”，可以很直觀的看到對MongoDB操作後的資料。 1、‘Robo 3T’的安裝，網上很多途徑可下載，在此分享我使用的版本：連結：https://pan.baidu.com/s/1EcjmUVkXz1GQeTXy2fMk

[轉]jquery設定select選中，賦值等操作

一、基礎取值問題例如<select class="selector"></select> 1、設定value為pxx的項選中 $(".selector").val("pxx"); 2、設定text為pxx的項選中

MySql 連結查詢時加入count，avg等操作時的方法

當sql語句要查詢總數又同時要查詢其他資料時，加上ROUND() select a.*,ROUND(AVG(b.s_score),2),ROUND(count(b.s_score)) from student a left join score b on b.s_id=a.s_i

jQuery中的DOM操作——總結了相關DOM操作的方法

DOM是一種與瀏覽器，平臺，語言無關的介面，使用該介面可以輕鬆的訪問頁面中所有的標準組件，它給予了web設計師和開發者一套標準的方法，讓他們能夠輕鬆的獲取和操作網頁中的資料，指令碼和表現層物件。 DOM操作的分類分為三個方面：DOM Core（核心）, HTML-DO

POI 操作excel的樣式等問題記錄

1.行合併起始行有邊框其他行沒有邊框解決方案：把要合併的行也建立一下設定值為空字串，並設定為樣式 2.合併單元格 sheet.addMergedRegion(new CellRangeAddress(1, 1, 0, 2)); 3.自適應列寬度 sheet.autoSizeColumn(1); sh

【Java多執行緒併發總結】Thread類的常用方法(join、yield等)---執行緒的基礎操作篇

啟動(start) 最基本的操作，呼叫Runnable中的run方法，無返回值。 new Thread(new Test()).start(); 休眠(sleep) 使當前執行緒休眠一段時間，預設為毫秒級，最高可以精確到納秒，呼叫的方法為slee

jquery的樣式操作，類操作（新增刪除 css）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

解密jQuery核心樣式操作

基礎回顧 jQuery裡節點樣式讀取以及設定都是通過.css()這個方法來實現的，本章通一下分解探究下jquery裡這部分程式碼的實現那麼jQuery要處理樣式的哪些問題? 先簡單回顧下樣式操作會遇到的問題 HTML樣式定義3種方式了 <link/> 外部引入也就是定義CSS中的

問題收集:網路上,這種$.session.get()等方法,在jq中使用操作session,需要注意的地方

這兩天做一個小專案,想在JQ中操作session,百度後出現了好多類似於這樣的操作,就是先匯入個jqSession,然後使用如下圖的方法.但是在使用後,發生了錯誤,經檢驗發現:他的這個方法是有侷限性的.無法通過此方法去操作採用其他方法設定的 session.舉例證明

Service中通過main方法載入Spring連線資料庫等操作

Spring+springmvc+mybaits.通過main方法測試。除controller這層外，我一般不喜歡通過啟動tomcat來測試，特別是在搭建框架以及測試service與dao的時候，喜歡在main方法中進行除錯，看看框架是否可行。可以做很多事，例如

Servlet-從form表單跳轉到另一Servlet做驗證等操作實現方法

index.jsp <form action="validateServlet" method="post"> 驗證碼：<input name="inputCode" value=""/> <

SpringAOP註解方式記錄操作日誌(操作模組,操作功能,呼叫方法,主鍵資訊等)支援多筆操作時記錄

使用AOP切入的方式記錄操作日誌,本程式碼主要採用列舉作為記錄方式,具體程式碼如下. 首先先定義先關列舉: /** * 列舉公共介面 * @author LeiYong * */ public interface EnumSuper { /** * 獲取值

javascript 原生方法對dom節點的操作，建立、新增、刪除、替換、插入、複製、移動等操作

<span style="font-size:18px;">/** * Created by hua on 2014/10/21. */ //查詢節點 document.getElementById("id");//通過id查詢，返回唯一的節點，如果有多個將

一、jQuery小程式之jQuery效果顯示和隱藏 fading方法滑動方法 animate()動畫方法 chaining

隱藏和顯示： <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="htt

day25css方法 jquery效果 樣式等操作

相關推薦

day25css方法 jquery效果樣式等操作