`
zengshaotao
  • 浏览: 800031 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery 1

 
阅读更多

<link href="1.css" type="text/css" rel="stylesheet" />

class选择器
.special{}----<p class="special">可用于别的标记
h4.special{}----<h4 class="special"> 

ID选择器
#one{}----<p id="one">

选择器的嵌套
p b{}; .second i{}。。。

子选择器
ul.myList > li > a{},用来选择一个父元素直接的子元素,不包括子元素的子元素

h2[title=CSS1]{}----<h2 title="CSS1">

 

段落文字:
行间距line-height:8pt;绝对值
line-height:1.5em;相对数值,1.5倍行距

<div>是一个块级元素,它包围的元素会自动换行。
<span>是一个行内元素,不会换行。
<span>可以包含在<div>中,成为它的子元素,但反过来不行。

 

盒子模型
content+padding+border+margin(内容+边框+间隙+间隔)


float定位
position定位:absolute、relative、fixed

clear:both;    

 

DOM访问节点
document.getElementsByTagName_r("ul")
document.getElementsByTagName_r("idname")

 

 

事件
onclick="方法名('参数');"

var oDiv = document.getElementByIdx_x_x("层id号");
oDiv.innerHTML += sText; //在那个层中输出东西

<p id="myP">Click Me</p>通过设置id属性来监听事件
<script language="javascript">
window.onload = function(){
 var oP = document.getElementByIdx_x_x("myP"); //找到对象
 oP.onclick = function(){     //设置事件监听函数
  alert('我被点击了');
 }
}
</script>

 

IE的监听函数
<script language="javascript">
function fnClick(){
 alert("我被点击了");
 oP.detachEvent("onclick",fnClick);  //点击了一次后删除监听函数
}
var oP;
window.onload = function(){
 oP = document.getElementByIdx_x_x("myP"); //找到对象
 oP.attachEvent("onclick",fnClick);  //添加监听函数
}
</script>

 

标准DOM监听方法
<script language="javascript">
function fnClick1(){
 alert("我被fnClick1点击了");
 //oP.removeEventListener("click",fnClick2,false);  //删除监听函数2
}
var oP;
window.onload = function(){
 oP = document.getElementByIdx_x_x("myP"); //找到对象
 oP.addEventListener("click",fnClick1,false);  //添加监听函数1
 oP.addEventListener("click",fnClick2,false);  //添加监听函数2
}
</script>

 

事件的类型
<script language="javascript">
function handle(oEvent){
 var oDiv = document.getElementByIdx_x_x("display");
 if(window.event) oEvent = window.event;  //处理兼容性,获得事件对象
 if(oEvent.type == "click")     //检测事件名称
  oDiv.innerHTML += "你点击了我&nbsp&nbsp;";
 else if( oEvent.type == "mouseover")
  oDiv.innerHTML += "你移动到我上方了&nbsp&nbsp;";
  
}
window.onload = function(){
 var oImg = document.getElementsByTagName_r("img")[0];//获取第一个img标签
 oImg.onclick = handle;
 oImg.onmouseover = handle;
}
</script>

var bShift=oEvent.shiftKey;//检测shift按键
var bAlt=oEvent.altKey;//检测alt按键
var bCtrl=oEvent.ctrlKey;//检测ctrl按键

var iClientX=oEvent.clientX;//鼠标指针在客户端区域的位置
var iScreenX=oEvent.screenX;//鼠标指针在计算机整个屏幕的位置

 

 

form
获取表单document.forms["formname"]

<label for="name">姓名:</label><input type="text" name="name" id="name">
for用于将文字绑定到相应的表单元素上,for属性指定它所绑定的表单元素id

在编写表单时,尽量用label标签来提高用户的体验,并且每个表单元素都应该分配name和id属性。name用来将数据提交给服务器,id用于label的绑定。

var fm=document.forms["myForm1"];//获取表单
var a= fm.elements["comments"];//获取name属性为comments的元素
var a= fm.comments;

onmouseover="this.focus()" 鼠标经过时自动聚焦
onfocus="this.select()"聚焦后自动选择文本

 

 

Ajax
1、创建对象
var xmlHttp;
function createXMLHttpRequest(){
 if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}

2、建立请求
xmlHttp.open(method,url,asynchronous,user,password);
method:GET,POST
asynchronous:布尔值,是否为异步同步,默认true
xmlHttp.open("GET","9-1.aspx",true);

3、xmlHttp.onreadystatechange
发生任何状态变化时的事件控制对象

4、发出请求后,使用readyState属性来判断目前请求的情况
0:尚未初始化
1:正在发送请求
2:请求完成
3:请求成功,正在接收数据
4:数据接收成功

4、status判断服务器的响应状态
200:请求成功
202:请求被接受,但处理未完成
400:错误的请求
404:资源未找到
500:内部服务器错误,如aspx代码错误

5、send(body)发送请求,send(null)表示不发送任何数据
body格式为查询字符串的形式,var body="myName=xj&age=22"
如果open的方法是post,则发送之前要设置HTTP的头,xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

6、服务器在收到客户端的请求之后,根据请求返回的相应结果,一种是文本形式,存储在responseText中,可进行字符串的处理xmlHttp.responseText;一种是XML格式,存储在responseXML中,进行DOM相关处理

注:IE浏览器会自动缓存异步通信的结果,解决办法是每次使异步请求的URL地址不同
var sUrl = "9-1.aspx?timestamp=" + new Date().getTime(); //地址不断的变化

处理多个异步请求
因为可能会导致前几次请求的返回数据被覆盖,所以将xmlHttp对象作为局部变量来处理,并在收到服务器的返回值后手动删除,delete xmlHttp;xmlHttp = null;

分享到:
评论

相关推荐

    jQuery1.x和2.x版本js大全官方版.rar

    jQuery自发布以来,从1.0版本一直到现在2.x大约有十几个版本,尽管官方发布了2.x,但是由于2.x不再兼容IE6、7、8,因此使用jQuery1.x版本的开发者还是比较多,由于版本较多,您可能无法获取最全的jQuery框架,最火...

    jQuery 1_2 API 参考文档中文版.mht

    jQuery 1_2 API 参考文档中文版.mht

    jquery1 9中文API 包括min js与升级说明

    JQuery 1 9 1 中文手册 chm API JQUERY最新1 8 CHM jquery api 1 9 英文 chm jQuery1 9升级指南和相关注意事项 pdf jquery 1 9 1 min js 绝对值得拥有

    jQuery1·3API参考文档中文版.CHM

    jQuery1·3API参考文档中文版.CHM

    jQuery1-2-3中文参考手册

    jQuery1-2-3中文参考手册

    jQuery1.12.4+jQuery中文手册.rar

    `jQuery1.11.0_20140330.chm`可能是早期版本的jQuery API参考,而`jQueryAPI_CHM.CHM`则是针对jQuery 1.x系列的API手册,可能包含了1.12.4版本的相关信息。 在这些API文档中,你可以找到jQuery的函数、方法、选择器...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jQuery 1_3 API 参考文档中文版.mht

    jQuery 1_3 API 参考文档中文版.mht

    jquery-1.9.1.js

    因为旧版 IE 浏览器在整个互联网中还有很大部分市场,所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的,所以不必因为你们...

    jQuery-1.9.1(英文版)帮助文档

    jQuery 1 9 1英文版帮助文档 包括3个部分内容:学习中心(Learning Center) JQuery API JQuery UI API 其中学习中心有JS入门基础 JQuery的相关核心概念 J插件常识和性能方面建议 JQuery Mobile 移动开发)等 内容比...

    jquery form插件的各个版本

    例如,早期版本可能适用于jQuery 1.x,而较新版本可能兼容到jQuery 3.x甚至4.x。 - 某些版本可能增加了新特性,比如支持更多的选项或API,以满足不断发展的Web开发需求。 - 新版本通常会修复安全漏洞,因此对于...

    jquery jqGrid 4 7 1 zip下载 css js plugins src

    | jquery 1 9 0 min js plugins | grid addons js | grid postext js | grid setcolumns js | jquery contextmenu js | jquery searchFilter js | jquery tablednd js | searchFilter css | ui multiselect css | ui...

    jquery未压缩源码下载

    1. **jQuery核心概念** - **选择器(Selectors)**: jQuery模仿CSS选择器,使得通过JavaScript选取DOM元素变得简单,如`$("#myID")`选取ID为`myID`的元素。 - **链式调用(Chaining)**: jQuery对象可以连续调用...

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    "jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...

    jQuery1.x_VSDoc智能提示

    jquery-1.3.2-vsdoc.js jquery-1.4.2-vsdoc.js jquery-1.4.4-vsdoc.js jquery-1.6.2-vsdoc.js jquery-1.7-vsdoc.js jquery-1.8-vsdoc.js jquery-1.9.1-vsdoc.js 使用方法: test.js /// &lt;reference path="../Tips/...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jQuery基础.pptx

    1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    锋利的jQuery pdf + 示例代码

    第1章 认识jQuery 1 1.1 JavaScript和JavaScript库 1 1.1.1 JavaScript简介 1 1.1.2 JavaScript库作用及对比 1 1.2 加入jQuery 3 1.2.1 jQuery简介 3 1.2.2 jQuery的优势 4 1.3 jQuery代码的编写 5 1.3.1 ...

    jQuery 2.1.1 官方正式版

    如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9,但是更简单的方法则是沿用 jQuery1.x版本。至少目前2.0的主要用例,对IE的支持是不再考虑范围内了,而是Chrome或者...

Global site tag (gtag.js) - Google Analytics