JavaScript获取高度和宽度

屏幕分辨率为:screen.width screen.height
屏幕可用大小:screen.availWidth screen.availHeight
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽(包括边线的宽):document.body.offsetWidth
网页可见区域高(包括边线的宽):document.body.offsetHeight
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

DOM基础知识

1.DOM介绍

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。

(注意:IE中的DOM和其他浏览器有区别,IE中用的是COM)

2.节点分类:

元素节点,文本节点,属性节点

比如:<span id=myid>文本内容</span>

那么元素结点就是span,文本节点就是:文本内容,属性节点就是:id=myid

Continue reading

原生JavaScript第三天

1.日期时间

var obj=new Date();
//alert(obj);//不同浏览器显示不同

var year=obj.getFullYear();//年份2012
var month=obj.getMonth();//月份,注意是从0开始算起
var day=obj.getDate();//返回日期
var week=obj.getDay();//0表示星期日,6表示星期六
var hour=obj.getHours();//获取小时
var minutes=obj.getMinutes();//获取分钟
var seconds=obj.getSeconds();//获取秒数
document.write(year+’-‘+month+’-‘+day+’-‘+week+’-‘+hour+’-‘+minutes+’-‘+seconds);
附:
格林尼治标准时间—-http://baike.baidu.com/view/1441912.htm
协调世界时———-http://baike.baidu.com/view/325501.htm

Continue reading

原生JavaScript第二天

1.typeof操作符

typeof操作符用来检测变量的数据类型

2.数据类型

2.1Undefined类型,只有一个值undefined(在使用var声明变量没有初始化的时候,这个变量数据类型的值就是undefined)

注意:没有初始化和没有声明的变量是不一样(虽然typeof返回的值都是undefined,但是没有声明的会报错的)

2.2Null类型,只有一个值null,typeof操作符检测null返回object(这样就可把将来要保存对象的变量初始化为null)

注意:underfined和null两个比较是相等的(也就是说定义为null的变量和未初始化的变量两个比较返回true)

2.3Boolean类型,有两个值true和false(注意这里1不一定等于true,在php里面可以数字0、字符串0、空字符串、false)

当然任何一个值可以通过Boolean()函数显示强制性转换,如果用到if判断条件那么会隐式转换,只有0和NaN、null、underfined、空字符串显示转换才是假

2.4Number类型,包含两种数值整型和浮点型,Nan是一个特殊的值(就是12/0或者0/0的结果)

Number()是转型函数,可以转换任何数据类型,parseInt()是把字符串转成数值整数部分,parseFloat()转成小数

2.5String类型,字符串可以用双引号或者单引号包含表示

2.6Object类型,可以通过new操作符来创建
Continue reading

原生JavaScript第一天

首先:感谢李炎恢老师的无私奉献

其次:下面的学习总结都是根据李炎恢老师的视频以及参考网络资料编写,转载请注明出处:http://www.0377joyous.com(快乐的程序员)

然后:博客目的就是收藏以及整理自己所学总结,一直想加强一下JavaScript方面的知识,所以~~

1.安装谷歌,火狐,IEtest浏览器
2.安装火狐firebug插件(方法:菜单中的“工具”—“附加组件”—在右上角搜索栏输入“firebug”然后安装即可,安装之后重启浏览器)
3.编辑代码使用notepad或者dreamweaver
4.编写第一个JavaScript代码
<script type=”text/javascript”>
alert(‘hello world !’);
</script>
5.JS代码如果太多可以使用一个js文件存储,然后使用
<script type=”text/javascript” src=”joyous.js”></script>
注意:不要再标签内部写js代码了,这样joyous.js里面不需要在用,<script></script>包含了
6.如果客户端仅用了javascript可以使用noscript包含提示内容
7.JavaScript是区分大小写的语言
8.标识符字母下划线和$开头,组成成分有字母、下划线、美元符号或者数字(注意不能把关键词作为标识符比如:null、true、if等)
9.注释
//这里是当行注释
/*
多行注释使用
多行注释使用
多行注释使用
*/
10.定义变量 var temp;定义并初始化 var temp=10

获取页面所有a标签并对其添加title属性

今天公司需要做seo优化,添加所有的a标签上面添加title属性。前台在一个一个的添加,我发现了就建议他使用js获取所有的a然后增加属性即可~~(收藏了)

<script type=”text/javascript”>
$(function(){
for(i=0;i<$(“a”).length;i++)
{
var a_content=$(“a:eq(“+i+”)”).text();
$(“a:eq(“+i+”)”).attr(‘title‘,a_content);
}

});
</script>

扩展:把红色的改成alt就可增加alt属性。当然他们的值就是a标签中间包含的部分。

JQuery实现双击编辑异步更新

[js]

<script type="text/javascript">
$(function(){
$("tbody>tr>td").dblclick(function(){
var inval=$(this).html();//获取内容
var keyword=$(this).attr("key");//获取要更新的字段
var upid=$(this).parents().attr("index");//获取更新哪一行
$(this).html("<input id=’edit"+keyword+upid+"’ value=’"+inval+"’/>");//内容换成input框并保留原来内容
$("#edit"+keyword+upid).focus().live("blur",function(){//获取input标签添加动作
var upval=$(this).val();//获取新输入的内容
$(this).parents("td").html(upval);//把新输入的内容显示在td表格内
$.post("post.php",{i:upid,k:keyword,v:upval});//异步传送数据
});//live方法类似bind
});
});
</script>

[/js]

具体代码打包双击编辑内容异步更新

附:参考PHP100视频制作

AJAX的XMLHttpRequest

readyState属性

标识当前的XMLHttpRequest对象处于什么状态

0表示为未初始化,1表示准备发送状态,2表示已发送状态,3正在接收,4完成响应

responseText属性

包含客户端接收到的http响应的文本内容(readyState需要为4)

responseXML属性

这个属性需要满足两个条件:readyState=4,头部content-type的mime类型为XML

status属性

在readyState=3或者4的时候才能有访问这个属性,这个属性描述了http状态码

statusText属性

同上面一样只有在3、4才能用,描述了http状态代码文本

onreadystatechange事件

每次readyState的值变化都会触发这个事件,一般用于回调函数

open()方法

用于XMLHttpRequest来初始化对象

send()方法

发送数据

abort()方法

可以暂停httprequest请求或者发送httpresponse的接收,并可以 把XMLHttpRequest对象改变成初始化状态

setRequestHeader()方法

设置请求头部信息,并只能当readyState为1才可以使用

getResponseHeader()方法

检索响应头部值,当readyState为3或者4才可以使用

Jquery和Ajax

1、  ajax基础知识(http://www.0377joyous.com/archives/484.html

2、  load()函数示例代码

<button id=”send”>触发</button>

<div class=”content”></div>

<script type=”text/javascript”>

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php?id=2”);//这里相当于访问了服务器然后返回纯html给这个页面,注意需要样式的话当然也在当前页面定义

});

});*/

//load.php页面很多内容,我只需要部分内容可以吗?

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php?id=2 .select”);//这里和上面只是多了一个.select;这里只是显示load.php页面中class=select那个区域的内容

});

});*/

//传递参数get和post传递

//get上面那样就可以

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php #post”,{name:”姓名”,age:”22″})

});

});*/

//回调函数,等待加载完成之后才能继续的操作,可以放在回调函数中执行.注意这个函数三个参数:返回的内容、请求状态、xmlhttprequest对象

</script>

而load.php页面代码如下:

<?php

echo “这里的内容是被加载的”.$_GET[‘id’];

?>

<br />

这是纯html

<div>

这是选中的内容

</div>

<div id=”post”>

这是POST传递测试

<?php

echo $_POST[‘name’].”年龄”.$_POST[‘age’];

?>

Continue reading

JQuery表格表单操作

1、多选框应用代码示例

<form action=”#” method=”post”>

你喜欢的明星是?<br />

<input type=”checkbox” name=”boxs” value=”张嘉译” id=”1″ /><label for=”1″>张嘉译</label>

<input type=”checkbox” name=”boxs” value=”周润发” id=”2″ /><label for=”2″>周润发</label>

<input type=”checkbox” name=”boxs” value=”刘亦菲” id=”3″ /><label for=”2″>刘亦菲</label>

<input type=”checkbox” name=”boxs” value=”古天乐” id=”4″ /><label for=”2″>古天乐</label>

<input type=”checkbox” name=”boxs” value=”刘德华” id=”5″ /><label for=”2″>刘德华</label><br />

<input type=”button” id=”checkall” value=”全选” />

<input type=”button” id=”checkno” value=”全不选” />

<input type=”button” id=”checkre” value=”发选” />

<input type=”button” id=”send” value=”提交” />

</form>

<script language=”javascript”>

//全选

$(“#checkall”).click(function(){

$(“[name=boxs]:checkbox”).attr(“checked”,true);//选择name=boxs并且是checkbox

});

//全不选

$(“#checkno”).click(function(){

$(“[name=boxs]:checkbox”).attr(“checked”,false);

});

//反选

$(“#checkre”).click(function(){

$(“[name=boxs]:checkbox”).each(function(){//each是对于每个匹配的元素所要执行的函数

this.checked=!this.checked;

});

});

//提交

$(“#send”).click(function(){

var str=”选中的值是:”;

$(“[name=boxs]:checkbox:checked”).each(function(){

str+=$(this).val()+”|”;

});

alert(str);

});

</script>

Continue reading