css中全局選擇器，rp預覽快捷鍵？

剪切Ctrl+X CMD+X復制Ctrl+C CMD+C粘貼Ctrl+V CMD+V粘貼為純文本Ctrl+Shift+V CMD+Shift+V粘貼包括鎖定的小部件Ctrl+Shift+Alt+V CMD+Shift+OPT+V粘貼樣式Ctrl+Alt+V CMD+OPT+V重復Ctrl+D CMD+D撤消Ctrl+Z CMD+Z重做Ctrl+Y CMD+Y全選Ctrl+A CMD+A打開文件Ctrl+O CMD+O新文件Ctrl+N CMD+N保存存檔Ctrl+S CMD+S另存為Ctrl+Shift+S CMD+Shift+S退出Axure RPAlt+F4 CMD+Q打印Ctrl+P CMD+P查找Ctrl+F CMD+F替換Ctrl+H CMD+R幫助F1 F1拼寫檢查F7 CMD+Shift+;首選項F9 CMD+,粗體/非粗體Ctrl+B CMD+B下劃線/無下劃線Ctrl+U CMD+U斜體/非斜體Ctrl+I CMD+I下一頁/工作界面Ctrl+TAB上一頁/工作界面Ctrl+Shift+TAB下一頁/所有頁面Ctrl+Alt+→ CMD+OPT+→上一頁/所有頁面Ctrl+Alt+← CMD+OPT+←關閉當前頁Ctrl+W CMD+W關閉窗口Alt+F4 CMD+Shift+W關閉所有標簽Ctrl+Shift+W CMD+Shift+OPT+W上一頁PgUp PgUp下一頁PgDn PgDn向前翻頁Shift+PgUp Shift+PgUp向后翻頁Shift+PgDn Shift+PgDn向上滾動鼠標向上滾動 鼠標向上滾動向下滾動鼠標向下滾動 鼠標向下滾動向左滾動Shift+鼠標向上滾動 Shift+鼠標向上滾動向右滾動Shift+鼠標向下滾動 Shift+鼠標向下滾動放大Ctrl+ CMD+縮小Ctrl- CMD-重置縮放Ctrl+0 CMD+0中心畫布Ctrl+1 CMD+1縮放到所選內容Ctrl+2 CMD+2中心選擇Ctrl+3 CMD+3移至0,0Ctrl+9 CMD+9臨時隱藏標尺Ctrl+SPACE Ctrl+SPACE顯示網格Ctrl+' CMD+'顯示全局標線Ctrl+Alt+, CMD+OPT+,顯示頁面參考線Ctrl+Alt+. CMD+OPT+.長方形Ctrl+Shift+B CMD+Shift+B橢圓Ctrl+Shift+E CMD+Shift+E文本Ctrl+Shift+T CMD+Shift+T鋼筆Ctrl+Shift+P CMD+Shift+P組合Ctrl+G CMD+G取消組合Ctrl+Shift+G CMD+Shift+G元件上移一層Ctrl+] CMD+]元件下移一層Ctrl+[ CMD+[元件移至頂層Ctrl+Shift+] CMD+Shift+]元件移至底層Ctrl+Shift+[ CMD+Shift+[左對齊Ctrl+Alt+L CMD+OPT+L居中對齊Ctrl+Alt+C CMD+OPT+C右對齊Ctrl+Alt+R CMD+OPT+R頂部對齊Ctrl+Alt+T CMD+OPT+T中間對齊Ctrl+Alt+M CMD+OPT+M底部對齊Ctrl+Alt+B CMD+OPT+B文字左對齊Ctrl+Shift+L CMD+Shift+L文字居中對齊Ctrl+Shift+C CMD+Shift+C文字右對齊Ctrl+Shift+R CMD+Shift+R水平分布Ctrl+Shift+H CMD+Shift+H垂直分布Ctrl+Shift+U CMD+Shift+U轉換為動態面板Ctrl+Shift+Alt+D CMD+Shift+OPT+D轉換為母版Ctrl+Shift+Alt+M CMD+Shift+OPT+M還原部件Ctrl+Shift+Alt+B CMD+Shift+OPT+B鎖定位置和尺寸Ctrl+K CMD+K解鎖位置和尺寸Ctrl+Shift+K CMD+Shift+K編輯位置和尺寸Ctrl+L CMD+L保持寬高比調整W/H大小Shift+ENTER Shift+ENTER圖片剪切Ctrl+Shift+Alt+S CMD+Shift+OPT+S圖片裁剪Ctrl+Shift+Alt+C CMD+Shift+OPT+C插入文本鏈接Ctrl+Shift+Alt+H CMD+Shift+OPT+H刪除所有視圖Ctrl+DEL CMD+DEL減少腳注編號Ctrl+J CMD+J增加腳注編號Ctrl+Shift+J CMD+Shift+J縮小字體Ctrl+Alt+- CMD+OPT+-放大字體Ctrl+Alt++ CMD+OPT++更改字體Ctrl+T CMD+T合并形狀Ctrl+Alt+U CMD+OPT+U減去頂層形狀Ctrl+Alt+S CMD+OPT+S與形狀區域相交Ctrl+Alt+I CMD+OPT+I排除重疊形狀Ctrl+Alt+X CMD+OPT+X新建頁面Ctrl+ENTER CMD+ENTER新建文件夾Ctrl+Shift+ENTER CMD+Shift+ENTER降級選中頁面TAB TAB升級選中頁面Shift+TAB Shift+TAB向上移動所選項目Ctrl+↑ CMD+↑向下移動所選項目Ctrl+↓ CMD+↓搜索全部Ctrl+Shift+F CMD+Shift+F從搜索欄移至結果列表↓ ↓從結果列表返回搜索欄Shift+TAB Shift+TAB退出搜索ESC ESC復制頁面Ctrl+D CMD+D相交選中Ctrl+Alt+1 CMD+OPT+1包含選中Ctrl+Alt+2 CMD+OPT+2連接器模式Ctrl+E CMD+E光標模式Ctrl+Alt+P CMD+OPT+P定位至交互欄目Ctrl+Shift+X CMD+Shift+X定位至說明欄目Ctrl+Shift+N CMD+Shift+N左側欄目隱藏Ctrl+Alt+[ CMD+OPT+[右側欄目隱藏Ctrl+Alt+] CMD+OPT+]預覽Ctrl+. CMD+.預覽項目Ctrl+Shift+Alt+P CMD+Shift+OPT+P發布到Axure CloudCtrl+/ CMD+/生成HTMLCtrl+Shift+O CMD+Shift+O重新生成當前頁面Ctrl+Shift+I CMD+Shift+I生成說明書Ctrl+Shift+D CMD+Shift+D生成器配置Ctrl+Shift+M CMD+Shift+M登錄Axure RP賬戶Ctrl+F12 CMD+F12。

jQuery通用的全局遍歷方法？

1.test.json文件代碼：

[

{

"username": "張三",

"content": "沙發."

},

{

"username": "李四",

"content": "板凳."

},

{

"username": "王五",

"content": "地板."

}

]

2.html代碼：

<p>

<input type="button" id="send" value="加載"/>

</p >

<div class="comment">已有評論：</div>

<div id="resText" ></div>

3.jQuery代碼：

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

/*

1.$.each()是jquery的一個通用的遍歷方法，可用于遍歷對象和數組

2.$.each()函數不同于jquery對象的each()方法，它是一個全局函數，不操作jquery對象，而是以一個數組或者對象作為第一個參數，以一個回調函數作為第二個參數。回調函數擁有兩個參數：第一個參數為對象的成員或數組的索引，第二個參數為對應變量或內容

*/

$(function(){

$('#send').click(function() {

$.getJSON('test.json', function(data) {

$('#resText').empty();

var html = '';

$.each( data , function(commentIndex, comment) {

html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p ></div>';

})

$('#resText').html(html);

})

})

})

</script>

jQuery如何定義插件？

Query編寫插件的兩種方法

1.添加jQuery對象級的插件，是給jQuery類添加方法

寫法：

;(function($){

$.fn.extend({

"函數名":function(自定義參數){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.函數名=function(自定義參數){

//這里寫插件代碼

}

})(jQuery);

調用方法：$("#id").函數名(參數);

2.jQuery類級別的插件，相當于添加靜態方法

;(function($){

$.extend({

"函數名":function(自定義參數){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.函數名=function(自定義參數){

//這里寫插件代碼

}

})(jQuery);

調用方法：$.函數名(參數);

jquery插件的種類：

1.對象級別的插件開發，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

2.一種是類級別的插件開發，即給jQuery添加新的全局函數，相當于給jQuery類本身添加方法，jQuery的全局函數就是屬于jQuery命 名空間的函數，封裝全局函數的插件

3.選擇器插件

jQuery插件機制

jQuery為開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object); 給jQuery對象添加方法。

jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法，可以理解為添加靜態方法。

這兩個方法都接受一個參數，類型為Object，Object對應的"名/值對"分別代表"函數或方法體/函數主體"。

fn 是什么東西呢？

查看jQuery代碼，就不難發現：

jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... };

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然javascript沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如 我們用 語句 $("#btn1") 會生成一個 jQuery類的實例。

jQuery.fn.extend(object)， 對jQuery.prototype進行擴展，就是為jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。即：$("#id").object();

jQuery.extend()方法除了可以擴展jQuery對象外，還可以擴展已有的Object對象，經常被用于設置插件方法的一系列默認參數，可以很方便的用傳入的參數來覆蓋默認值

jQuery.extend(object1,object2)object1默認參數值，object2傳入的參數值；詳細說明，請點擊這里

var settions ={validate:false,limit:5,name="foo"};

var options ={validate:true,name="bar"};

var newOptions=jQuery.extend(settings,options);

結果為：

newOptions = {validate:true,limit:5,name="bar"};

function foo(options){

options = jQuery.extend({

name="bar",

length:5,

dataType="xml" /*默認參數*/

},options /*options 為傳遞的參數*/

);

}

如果用戶調用foo()方法的時候，在傳遞的參數options對象中設置了相應的值，

那么就使用設置的值，否則使用默認值，調用方法：

foo({name:"a",length:4,dataType:"json"});

foo({name:"a"});

foo();

編寫jQuery插件

封裝jQuery對你方法的插件，首先需要在javaScript文件里搭好框架，代碼如下：

;(function($){

//這里寫插件代碼

})(jQuery);

1.對象級別的插件開發，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

由于是對jQuery對象的方法擴展，因此采用擴展第1類（封裝對象方法）插件的方法jQuery.fn.extend()來編寫

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

}

});

})(jQuery);

或者

;(function($){

$.fn.color=function(value){

//這里寫插件代碼

}

})(jQuery);

這里的方法提供一個參數value,如果調用方法時傳入value，那么就用這個值來設置字體顏色,否則就是獲取匹配無此的字體顏色的值

;(function($){

$.fn.extend({

"color":function(value){

return this.css("color",value);

}

});

})(jQuery);

插件內部的this指向的是jQuery對象，而非普通的DOM對象。接下來注意的是，插件如果不需要返回字符串之類的特定值，應當使其具有可鏈接性。

為此，直接返回這個this這個對象，由于css()方法也會返回調用它的對象，即此外的this，因此可以將代碼寫成上面的形式;

調用時可直接寫成：$("div").color("red");

另外如果要定義一組插件，可以使用如下所示寫法：

;(function($){

$.fn.extend({

"color":function(value){

//這里寫插件代碼

},

"border":function(value){

//這里寫插件代碼

},

"background":function(value){

//這里寫插件代碼

}

});

})(jQuery);

2.封裝全局函數的插件

這類插件是在jQuery命名空間內部添加一個函數。這類插件很簡單，只是普通的函數，沒有特別需要注意的地方。

例如新增兩個函數，用于去除左側和右側的空格。

首先構建一個Object對象，把函數名和函數都放進去，其中的名/值對分別為函數名和函數主體

然后利用jQuery.extend()方法直接對jQuery對象進行擴展

jQuery代碼如下：

;(function($){

$.extend({

ltrim:function(text){

return (text||"").replace(/^\s+g,"");

},

rtrim:function(text){

return (text||"").replace(/\s+$/g,"");

}

});

})(jQuery);

或者

;(function($){

$.ltrim=function(text){

return (text||"").replace(/^\s+g,"");

},

$.rtrim=function(text){

return (text||"").replace(/\s+$/g,"");

}

})(jQuery);

*(text||"")部分是用于防止傳遞進來的text這個字符串變量處于未定義的特殊狀態，如果text是undeined，則返回字符串""，否則返回字符串text。

這個處理是為了保證接下來的字符串替換方法replace()方法不會出錯

*運用了正則表達式替換首末的空格

調用函數：

$("trimTest").val(

jQuery.trim(" test ")+"\n"+

jQuery.ltrim(" test ")+"\n"+

jQuery.rtrim(" test ")

);

運行代碼后，文本框中第一行字符串左右兩側的空格都被刪除。

第二行的字符串只有左側的空格被刪除。

第三行的字符串只有右側的空格被刪除。

3.自定義選擇器

sass系統產品介紹？

Sass是CSS的預處理器，它提供了許多便利的寫法方法

可以使用變量，常量，嵌套，函數，混合，繼承等功能，讓css的開發變得更加簡單可維護。

直接寫出來的sass文件其實就是普通的文本文件，以.sass或.scss作為文件后綴名。

里面可以直接使用css語法以及sass特有的語法特性，完成后通常需要經過編譯成合法的css文件以供瀏覽器使用。

sass的安裝

sass基于Ruby語言開發而成，因此安裝sass前需要安裝Ruby。

安裝完成后需測試安裝有沒有成功,運行CMD輸入以下命令：

ruby -v

如安裝成功會打印

ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Ruby自帶一個叫做RubyGems的系統，用來安裝基于Ruby的軟件。我們可以使用這個系統來 輕松地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你需要輸入下面的命令：

安裝如下(如mac安裝遇到權限問題需加 sudo gem install sass)

gem install sass

gem install compass

在每一個安裝過程中，你都會看到如下輸出：

Fetching: sass-3.x.x.gem (100%)

Successfully installed sass-3.x.x

Parsing documentation for sass-3.x.x

Installing ri documentation for sass-3.x.x

Done installing documentation for sass after 6 secon

1 gem installed

安裝完成之后，你應該通過運行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v

Sass 3.x.x (Selective Steve)

compass -v

Compass 1.x.x (Polaris)

Copyright (c) 2008-2015 Chris Eppstein

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

sass的編譯

1.命令行編譯;

//單文件轉換命令

sass input.scss output.css

//單文件監聽命令

sass --watch input.scss:output.css

//如果你有很多的sass文件的目錄，你也可以告訴sass監聽整個目錄：

sass --watch app/sass:public/stylesheets

2.編譯工具Koala

3.使用vscode中的Live Sass Compiler插件來實現scss文件的實時編譯

變量

Sass 讓人們受益的一個重要特性就是它為 CSS 引入了變量。你可以把反復使用的 CSS 屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。

變量的定義是以$符號開頭，加上變量名，比如：

$text-warning: red;

$border-radius: 5px;

.tip {

color: $text-warning;

border: 1px solid $border-radius;

}

變量也可以通過加減乘除等運算符號進行計算，比如：

$font-base: 10px;

.article {

font-size: $font-base * 2 - 4px;

border-width: $font-base / 10;

}

變量的注意事項

變量需要提前聲明才能使用，因為編譯是從上往下進行的，如果在還未聲明變量的地方使用，會找不到這個變量。

變量都是全局變量，如果在大括號內部定義的變量則屬于局部變量。

嵌套

通常所用到的選擇器嵌套是這樣的，將新的選擇器放到父級選擇器當中，并且可以無限多級嵌套。

繼承

如果存在兩個class，他們有一些不同但又有許多相似之處，以前的做法可能是把所有樣式重復聲明兩次。但是有sass之后更好的做法是創建一個基礎的class，然后在第二個class中用@extend繼承它，同時還可以添加一些額外的樣式，或者對某些樣式進行重寫。比如我們之前學過bootstrap的按鈕的構建思想，是對基礎樣式進行附加和重寫，而現在想要定義自己的樣式時就可以很方便地進行這一操作了。首先聲明一個標準樣式的class，然后繼承這個樣式，然后設置不同的主題色：

混合

當出現大段大段重用樣式代碼時，獨立的變量就難以應付，這個時候可以通過sass的混合器@mixin 和 @include 實現大段樣式的重用。在定義mixin時，需要在前面添加@符號，使用時需要用@include來引用該@mixin：

導入

導入規則可以從外部文件導入mixin混合器等等。在sass中有一個命名慣例，被導入的樣式文件名用下劃線做前綴。導入的語法是@import “xxx”，這里的xxx不需要帶文件后綴和下劃線前綴。也就是說導入“_style.sass”或者“_style.scss”的時候，只需要寫@import “style”就可以了：

1.為什么要使用SASS？

它是預處理語言，它為CSS提供縮進語法（它自己的語法）。

它允許更有效地編寫代碼和易于維護。

它是包含CSS的所有功能的CSS的超集，是一個開源的預處理器，以 Ruby 編碼。

它提供了比平面CSS好的結構格式的文檔樣式。

它使用可重復使用的方法，邏輯語句和一些內置函數，如顏色操作，數學和參數列表。

2.列出SASS的一些功能？

它是更穩定，強大，與CSS的版本兼容。

它是超集的CSS和基于JavaScript。

它被稱為CSS的語法糖，這意味著它使用戶更容易閱讀或表達的東西更清楚。

它使用自己的語法并編譯為可讀的CSS。

你可以在更少的時間內輕松地編寫CSS代碼。

它是一個開源的預處理器，被解釋為CSS。

3.SASS的優點是什么？

它允許在編程結構中編寫干凈的CSS。

它有助于編寫CSS更快。

它是CSS的超集，幫助設計師和開發人員更有效率和快速地工作。

由于Sass兼容所有版本的CSS，我們可以使用任何可用的CSS庫。

可以使用嵌套語法和有用的函數，如顏色操作，數學和其他值。