1.DOM對象和JQuery對象的區別javascript
- jquery對象轉換成dom對象(再使用dom對象的方法)
var $cr=$("#cr"); //jquery對象
var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);
- dom對象轉換成jquery對象(只須要用$()把dom對象包裝起來，就能夠得到一個jquery對象了，方法爲$(dom對象))
var cr=document.getElementById("cr"); //dom對象
var $cr = $(cr); //轉換成jquery對象
轉換後能夠任意使用jquery中的方法了.
2.css屬性box-sizingphp
- 當設置一個元素爲
box-sizing: border-box;時，此元素的內邊距和邊框再也不會增長它的寬度（會佔用內容寬度，現設置的寬度=內容寬度+內邊距寬度+邊框寬度）。* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }（兼容性） css
3.$(document).ready()和$(window).load()的區別html
- 執行時間不一樣
$(document).ready()是指html解析完畢，dom樹已經創建起來了執行的方法。而此時頁面不必定加載完畢，例如大圖片等
$(window).load()是指頁面全部內容都加載完畢。 - 執行次數不一樣
$(document).ready()能夠執行屢次。能夠寫多個。而$(window).load()一個頁面 只能有一個，若是你寫了多個，則只會調用最後一個，以前的都會被覆蓋。 - 執行效率不一樣
$(document).ready()執行效率高一些。看狀況使用。
- 獲取 數組中最大值 Math.max.apply({},array)；
- 獲取 數組中最小值 Math.min.apply({},array)；
5.min-width與max-width使用java
- 設置min-width最小寬度與max-width最大寬度，方便縮放時內容清晰展示
6.在數組中查找指定值並返回它的索引（若是沒有找到，則返回-1）mysql
例子：jquery
console.log($.inArray( 「10」, [ "8", "9", "10", 10 + "" ] )); 2 //索引爲2
// 語法： $.inArray( value, array [, fromIndex ] )web
- $.inArray() 函數用於在數組中查找指定值，並返回它的索引值（若是沒有找到，則返回-1）
- 參數formIndex，表示從索引幾開始查找。
-
提示：源數組不會受到影響，過濾結果只反映在返回的結果數組中。面試
7.面試常見的js編程題
前端Javascript面試過程當中，字符串的逆序輸出是一個很常見的面試題
A 給定數組，求項相加
正解一：
<script type ="text/javascript">
//聲明一個函數，求任意個數的和，測試你聲明的函數
document.write (sum(2,3 ,7)+"<br />" );
document.write (sum(2,3 ,7,4,3 ,1)+"<br />" );
document.write (sum("Hello" ," ","Tom" )+"<br />");
function sum(){
var result = agruments[0];
//函數實際調用執行時傳入的參數，能夠從 arguments僞數組中獲取
for(var i = 1;i<agruments.length;i++){
result += agruments[i];
}
return result;
}
</script>
正解二：arr.reduce()
function sum(arr){
return arr.reduce(function(pre,cur,index,arr){
return pre+cur;
});
}
var arr = ["Tom","Mary"];
document.write(sum(arr)+"<br>");
arr = [2,3,4];
document.write(sum(arr));
//js reduce()方法
語法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
定義和用法
reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。
reduce() 能夠做爲一個高階函數，用於函數的 compose。
注意: reduce() 對於空數組是不會執行回調函數的。
參數
參數 描述
function(total,currentValue, index,arr) 必需。用於執行每一個數組元素的函數。
函數參數:
參數 描述
total 必需。初始值, 或者計算結束後的返回值。
currentValue 必需。當前元素
currentIndex 可選。當前元素的索引
arr 可選。當前元素所屬的數組對象。
initialValue 可選。傳遞給函數的初始值
第二題：
arr =[1,2,3,4,5,6,7,8,9]
從數組每次取出3個數 如：123 456 789 123 456 789依次循環下去。
正解:隊列
利用隊列先進先出的特徵，把數組元素依次放進去，每次取三個，依次放回去。循環就能夠了。
var arr = [1, 2, 3, 4, 5, 6, 7, 8], newStr='',num = 0, max = 3;
function loop() {
num++;
newStr = '';
for(var i=0;i<3;i++){
var item = arr.shift();
newStr +=item;
arr.push(item);
}
console.log(num+'次 '+newStr);
if(num > max) {
alert('done');
}else {
setTimeout(loop,500);
}
}
setTimeout(loop,500);
當arr = [1, 2, 3, 4, 5, 6, 7, 8],是123 456 781 234 678 123 456 781 …
jQuery.fn.extend = jQuery.prototype.extend
你能夠拓展一個對象到jQuery的 prototype裏去，這樣的話就是插件機制了。·
//code from http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
(function( $ ){
$.fn.tooltip = function( options ) {
};
//等價於
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );
$.inArray()函數：返回數組中指定元素的索引值。
定義和用法：
$.inArray()函數用於在指定數組中查找指定值，並返回它的索引（若是沒找到，則索引值返回-1）。
語法：
$.inArray( value, array [, fromIndex ] )
參數：
| value | 任意類型 用於查找的值。 |
| array | Array類型 指定被查找的數組。 |
| fromIndex | 可選。Number類型 指定從數組的指定索引位置開始查找，默認爲 0 |
實例
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>"John" 在索引值爲 <span></span> 的位置被找到</div>
<div>4 在索引值爲 <span></span> 的位置被找到</div>
<div>"Karl" 未被找到，因此返回 <span></span> </div>
<div>"Pete" 在數組中，可是不在索引值大於等於2的位置，因此返回 <span></span></div>
<script>
$(function () {
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
})
</script>
</body>
</html>
jquery -- .html(),.text()和.val()的使用
替換或修改
- .html():讀取和修改一個元素的HTML內容，詳情.html()；
- .text()：讀取和修改一個元素的文本內容，詳情.text()；
- .val()：讀取和修改一個表單元素的value字段值，詳情.val()。
刪除元素/內容（通常使用這兩種方法）
- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素
提示：
jQuery remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。
該參數能夠是任何 jQuery 選擇器的語法。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>刪除 class="italic" 的全部 p 元素</button>
</body>
</html>
語法：
$(selector).position();
定義和用法：
position() 方法返回匹配元素相對於父元素的位置（偏移）。
該方法返回的對象包含兩個整型屬性：top 和 left，以像素計。（此方法只對可見元素有效。）
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").position();
alert("Left position: " + x.left + " Top position: " + x.top); //left position:8px Top position: 8px;
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>得到 p 元素的位置座標</button>
</body>
</html>
jQuery 效果 - animate() 方法
語法1:
$(selector).animate(styles,speed,easing,callback)
參數：
| styles | 必需。規定產生動畫效果的 CSS 樣式和值。 可能的 CSS 樣式值（提供實例）：
註釋：CSS 樣式使用 DOM 名稱（好比 "fontSize"）來設置，而非 CSS 名稱（好比 "font-size"）。 |
| speed | 可選。規定動畫的速度。默認是 "normal"。 可能的值：
|
| easing | 可選。規定在不一樣的動畫點中設置動畫速度的 easing 函數。 內置的 easing 函數：
擴展插件中提供更多 easing 函數。 |
| callback | 可選。animate 函數執行完以後，要執行的函數。 |
語法2:
$(selector).animate(styles,options)
參數
| styles | 必需。規定產生動畫效果的 CSS 樣式和值（同上）。 |
| options | 可選。規定動畫的額外選項。 可能的值：
|
實例
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px", width:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px", width:"100px"});
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
stop() 方法
中止當前正在運行的動畫。
語法
$(selector).stop(stopAll,goToEnd)
| 參數 | 描述 |
|---|---|
| stopAll | 可選。規定是否中止被選元素的全部加入隊列的動畫。 |
| goToEnd | 可選。規定是否容許完成當前的動畫。 該參數只能在設置了 stopAll 參數時使用。 |
實例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({height:100},2000);
});
$("#stop").click(function(){
$("#box").stop();
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
HTML頁面，ajax是基於id的，全部用id表示。
拿到的數據會顯示在這裏
<div id="test"></div>
ajax源碼：
$(document).ready(function() {
$.ajax({
url : "admin/get_online_ganbu.php",//後臺請求的數據，用的是PHP
dataType : "json",//數據格式
type : "post",//請求方式
async : false,//是否異步請求
success : function(data) { //若是請求成功，返回數據。
var html = "";
for(var i=0;i<data.length;i++){ //遍歷data數組
var ls = data[i];
html +="<span>測試："+ls.name+"</span>";
}
$("#test").html(html); //在html頁面id=test的標籤裏顯示html內容
},
})
})
php源碼：
<?php
include "conn.php";//這是連接數據的。
$result = mysql_query("SELECT * FROM online where class =1 ");
$dataarr = array();
while($row = mysql_fetch_array($result)){
array_push($dataarr, $row);
}
mysql_close($con);
echo json_encode($dataarr);
?>
MUI - accordion（摺疊面板）、button
<body>
<header class="mui-bar mui-bar-nav">
<!--若是是自頁面，mui提供了一個標準的，而且js文件能自動完成後退功能-->
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1>摺疊面板</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<!--1,a標籤裏面放置默認展現的內容-->
<!--2,div裏面放置的是下拉內容，默認是隱藏的，點擊下拉就會展現出來，裏面能夠放置任何html形式的內容
若是但願某個面板默認展開，只須要在包含mui-collaose類的節點上增長mui-active類便可-->
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1內容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板2</a>
<div class="mui-collapse-content">
<p>面板2內容</p>
</div>
</li>
</ul>
</div>
</body>
來源：前端開發博客