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>
来源：前端开发博客