复习

最新推荐文章于 2022-04-24 17:02:08 发布

chongnao6544

最新推荐文章于 2022-04-24 17:02:08 发布

阅读量131

点赞数

文章标签： javascript 前端 php ViewUI

原文链接：https://my.oschina.net/u/3719399/blog/1573045

版权

1.DOM对象和JQuery对象的区别

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-sizing

当设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度（会占用内容宽度，现设置的宽度=内容宽度+内边距宽度+边框宽度）。
```
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
```
（兼容性）

3.$(document).ready()和$(window).load()的区别

执行时间不同
$(document).ready()是指html解析完毕，dom树已经建立起来了执行的方法。而此时页面不一定加载完毕，例如大图片等
$(window).load()是指页面所有内容都加载完毕。
执行次数不同
$(document).ready()可以执行多次。可以写多个。而$(window).load()一个页面只能有一个，如果你写了多个，则只会调用最后一个，之前的都会被覆盖。
执行效率不同
$(document).ready()执行效率高一些。看情况使用。

4.Javascript中获取数组最大值和最小值的方法

获取数组中最大值 Math.max.apply({},array)；
获取数组中最小值 Math.min.apply({},array)；

5.min-width与max-width使用

设置min-width最小宽度与max-width最大宽度，方便缩放时内容清晰展现

6.在数组中查找指定值并返回它的索引（如果没有找到，则返回-1）

例子：

console.log($.inArray( “10”, [ "8", "9", "10", 10 + "" ] )); 
2 //索引为2

// 语法： $.inArray( value, array [, fromIndex ] )

$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
参数formIndex，表示从索引几开始查找。
提示：源数组不会受到影响，过滤结果只反映在返回的结果数组中。

7.面试常见的js编程题

关于数组的js编程题（面试很常见哦）

前端Javascript面试过程中，字符串的逆序输出是一个很常见的面试题

js编程题以及答案

A 给定数组，求项相加

正解一：

//声明一个函数，求任意个数的和，测试你声明的函数

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 );

jQuery.inArray()方法

$.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>

jQuery CSS 操作 - position() 方法

语法：

$(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 样式值（提供实例）： backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
speed	可选。规定动画的速度。默认是 "normal"。可能的值：毫秒（比如 1500） "slow" "normal" "fast"
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。

语法2:

$(selector).animate(styles,options)

参数

styles

必需。规定产生动画效果的 CSS 样式和值（同上）。

options

可选。规定动画的额外选项。

可能的值：

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

实例

<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 参数时使用。

参数

描述

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>

ajax实现从后台拿数据显示在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>

来源：前端开发博客

转载于:https://my.oschina.net/u/3719399/blog/1573045

chongnao6544

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习

1.DOM对象和JQuery对象的区别 jquery对象转换成dom对象(再使用dom对象的方法) var $cr=$("#cr"); //jquery对象 var cr = $cr[0]; //dom对象也可写成 var cr=$cr.get(0); dom对象转换成jqu...
复制链接

扫一扫