web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)

1、强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2、iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

<meta content="yes" name="apple-mobile-web-app-capable" />

3、iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

4、告诉设备忽略将页面中的数字识别为电话号码

<meta content="telephone=no" name="format-detection" />

5、Android中禁止自动识别页面中的邮件地址,iOS中不会自动识别邮件地址;

<meta content="email=no" name="format-detection" />

6、渐变(这个在做按钮的时候很常用)
element{
      background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}

7、去掉手持设备点击时出现的透明层 (一般会在头部做格式化)
a,button,input{
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     -webkit-tap-highlight-color: transparent; /* For some Androids */
}

8、当用户点击链接离开本页时,弹出一个消息框:

$(window).unload(function(){
  alert("Goodbye!");
});

9、/*循环滚动*/
$("button").click(function(){
$("h3").eq(0).appendTo(‘p‘);
$("h3").eq(0).remove();
});

10、//js判断手机访问跳转到手机站 第一种方法
function browserRedirect() {

var sUserAgent= navigator.userAgent.toLowerCase();

var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";

var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";

var bIsMidp= sUserAgent.match(/midp/i) == "midp";

var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";

var bIsAndroid= sUserAgent.match(/android/i) == "android";

var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";

var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";

if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

window.location.href= ‘手机网站地址‘;

} else {

window.location= ‘电脑网站地址‘;

}

}
browserRedirect();

//js判断手机访问跳转到手机站 第二种方法
if(navigator.platform.indexOf(‘Win32‘)!=-1){

//pc

//window.location.href="电脑网址";

}else{

//shouji

window.location.href="手机网址";

}

$.parseJSON(response)用于把数据转换成JSON格式;

disabled(禁用)属性设定<input type="submit" disabled />在Js中设定,值为true and false;不用加双引号,作用是禁用某个元素,比如input submit会变成灰色无法点击。
如:document.getElementsByTagName(‘input‘)[0].disabled=true/false;
在Jquery中使用:$("#removeButton").removeAttr("disabled");//要变成Enable,JQuery只能这么写
$("#removeButton").attr("disabled","disabled");//再改成disabled

/*html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }此为全网页限制黑白色css代码*/
background:transparent;/*设置背景默认为透明*/

/*用css渐变滤镜实现背景渐变效果和透明效果*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#cc090909‘,endColorstr=‘#cc090909‘)!important; /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#cc0f0c0c‘,endColorstr=‘#cc0f0c0c‘)"!important; /* IE8 */
background-image: -moz-linear-gradient(rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.8) 100%); /*firefox*/
background-image: -webkit-linear-gradient(rgba(0,0,0,0.8) 100%, rgba(0,0,0,0.8) 100%); /*chrome*/

/*判断浏览器是否支持 placeholder*/
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$(‘[placeholder]‘).focus(function() {
var input = $(this);
if (input.val() == input.attr(‘placeholder‘)) {
input.val(‘‘);
input.removeClass(‘placeholder‘);
}
}).blur(function() {
var input = $(this);
if (input.val() == ‘‘ || input.val() == input.attr(‘placeholder‘)) {
input.addClass(‘placeholder‘);
input.val(input.attr(‘placeholder‘));
input.css({‘color‘:‘#555‘});
}
}).blur();
};
})

function placeholderSupport() {
return ‘placeholder‘ in document.createElement(‘input‘);
}

/*获取浏览器的类型和名称*/

function isIE(){
return navigator.appName.indexOf(‘Microsoft Internet Explorer‘)=="-1"?false:true;
}//通过获取浏览器内核来判断浏览器的类型Netscape与Microsoft Internet Explorer---《用于区分火狐内核和IE内核的浏器》

var isIE8=navigator.userAgent.toUpperCase().indexOf("MSIE8.0")=="-1"?false:true;
//判断是否是IE8.0浏览器《这个用法通过获取浏览器的名字清楚的判断是哪种浏览器》用时,----indexOf对大小写敏感,没找到返回值 "-1" --------

/*
下面介绍下 js获取客户端浏览器信息

Navigator 对象包含有关浏览器的信息。js就是通过Navigator的属性获取客户端浏览器信息
Navigator 对象属性:

属性
描述

appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。

*/

 
				
时间: 2024-10-01 04:25:34

web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)的相关文章

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

web前端学习笔记:JavaScript数组

今天主要给大家介绍javascript中数组的操作方法及函数的介绍,数组在其中的主要作用是使用单独的变量名来存储一系列的值.下面通过一些简单的javascript实例为大家讲解数组,具体的javascript教程如下: 字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单引号(') ,\" 双号(") \xnn 以十六进制代码nn 表示的一

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入介绍了整个jQuery框架,此外还专门深入介绍了插件编程,以及一些扩展开发工具和框架,比如Bower和QUnit,当然还有经典的开发实战原则.每个API方法都使用了简明扼要的语法块来描述参数和返回值. <jQuery实战>(第三版)涵盖了从简单入门(如何在网页中引入jQuery)到高级开发的内容,

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

web前端之MVC的JavaScript Web富应用开发一:MVC和类

web前端之MVC的JavaScript Web富应用开发一:MVC和类 开篇: 本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果. assert() 是一种快捷表述方式, 用来表示一个特定的变量( revolves to true). 这在自动化测试中是一种非常常见的模式. assert() 可以接收两个参数 : 一个值和一个可选的消息. 如果运行结果不是真值, 这个函数将抛出一个异常 : var assert = function(value,

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

Web前端开发笔记整理

web前端开发笔记: 1.web前端之html_day1 2.web前端之html_day2 3.web前端之css_day1