javaScript和jQuery【全解】

1. 函数

function 函数名称(参数列表){

   函数体

}

无参无返回值: function calc(){    js… } calc(); 有参有返回值 function calc2(a,b){  return a+b; } calc2(1,2); 匿名函数 function(){   js… } //匿名函数创建和调用  (function(a,b){        console.log(a+b); })(1,2);

内置函数:

parseInt():将字符串转换为整型的数据 parseFloat():将字符串转换为浮点数 isNaN():判断是否是一个非数字(字符串数值false) eval(): 将字符串转换为js代码(执行效率,xss攻击)

 

1. 对象

window:

       表示浏览器窗口。

       直接定义全局的函数都是window的函数。

       window对象的函数或属性调用可以省略window关键字。

属性:   document:获取文档对象   innerwidth:获取显示区宽度   innerHeight:获取显示区高度 方法:   alert(): 警告框   open():打开窗口   close():关闭窗口   confirm():确认框   setTimeout（）:创建timeout   clearTimeout()  清除timeout   var timeoutId = setTimeout(function(){               console.log("aa");            },2000);                clearTimeout(timeoutId);            var intervalId = setInterval(function(){            console.log("aa");     },2000);            clearInterval(intervalId);

 

      

document:

       Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

      

getElementById() 返回对拥有指定 id 的第一个对象的引用。     getElementsByName() 返回带有指定名称的对象集合。     getElementsByTagName() 返回带有指定标签名的对象集合。

date: 日期对象

      

var date = new Date();            //年            var year = date.getFullYear();            //月  0-11            var month = date.getMonth();            //日  一周中的天 0-6            //var day = date.getDay();            //月中的天            var day = date.getDate();                       //var hour = date.getHours();                       var date;            setInterval(function(){               date = new Date();               //document.write(date);            },1000);

 

1. dom操作

document object model:文档对象模型

dom树: 元素节点,属性节点,文本节点

1. 节点访问

getElementById():通过id值获取元素节点 document.getElementsByTagName("p")：通过标签名称获取元素集合 document.getElementsByName("username")：通过name值获取节点集合

 

1. 节点文本操作

innerHTML:获取修改文本内容 innerText:获取修改文本内容(只当做普通文本处理，不能设置标签)

 

1. 节点属性操作

节点对象.属性:获取或者修改属性值    className属性名

 

1. 节点样式操作   

对象.style.样式:获取或者修改样式 font-size è fontSize

 

1. 事件

1. ui事件

load事件: 加载事件  (window.onload:页面加载事件，窗口所有的节点绘制完毕触发事件)

scroll事件:滚动事件 (document.onscroll)

1. 鼠标事件

click事件:鼠标单击事件

dblclick事件:鼠标双击事件

mouseover事件:鼠标移入事件

mouseout事件:鼠标移出事件

1. 键盘事件

特点: 添加该事件在哪个节点，焦点在该节点时才能生效。

 

keyup: 键抬起时触发

keydown: 键按下时触发

keypress: 可打印字符触发

1. 焦点事件

focus:获取焦点

blur:失去焦点

 

1. 正则表达式

模式:   /开始     /结束

开始 ^     结束$

\d: 代表数字 [0-9]

\w:代表数字字母下划线 [0-9a-zA-Z_]

.:除换行符之外的任意一个字符

{m}:出现m次

{m,}:至少m次

{m,n}:出现m-n次

?: 0-1次

+: 1-多次

*: 0-多次

1. json
   1. js对象

 

//1.键值对   : //2.多个属性使用,  //值可以是基本类型也可以是对象类型 var person = {"name":"zs","age":12}; console.log(person);            var pers = [{"name":"zs","age":12},{"name":"ls","age":12}]; console.log(pers[1].age);

6.2 json

 本质就是个字符串，轻量级数据交互的格式。

               xml：可扩展标记语言

               json：键值对轻量级传输

1. 1. js和json字符串区分

js对象,json字符串；

js对象属性不要引号，json属性key必须用引号。

js对象不能传输,json用于传输。

 

1. 1. js对象和json的相互转换

js对象  à json

JSON.stringify(person);

jsonàjs对象

JSON.parse(json);

eval("("+json+")");

1. 什么是jQuery

原生javascript的函数库。

1. 为什么使用jQuery

1. 对原生js封装,操作更加简单
2. 对浏览器兼容很好处理
3. 丰富插件使用

1. 下载和安装

http://jquery.com/download/

安装:

1. js函数库下载到本地:

生产环境:  .min.js

开发环境:  .js

1. cdn:内容分发网络

1. jQuery使用

http://jquery.cuishifeng.cn/index.html

1. 基本语法

$(seletor).action()

$:jQuery的核心(jQuery对象)

selector:选择器

action:动作

1. 选择器

jQuery对象和dom对象的区别:

  jQuery对象:jQuery选择器获取的节点对象

  dom对象:js获取节点对象

 

dom—>jQuery:

   $(dom)

jQueryàdom

   jQuery[0]

   jQuery.get(0)

 

1. 1. 基本选择器

id选择器:  $(“#id”)

类选择器:  $(“.class”)

标签选择器: $(“tag”)

通配选择器: $(“*”)

1. 1. 组合选择器

并集:   $(sel1,sel2)

交集:   $(sel1sel2)

后代:  $(sel1 sel2)

1. 1. 属性

$(“[属性]”)

1. 1. 基本筛选器   :关键字
      1. :first
      2. :last
      3. :eq:等于
      4. ：lt 小于
      5. :gt  大于
      6. :odd 奇数
      7. :even 偶数

表单选择器

:text

:password

:radio…

1. 节点操作

1. 内容

html():获取或修改内容

text():获取或修改内容

1. 属性

attr(属性名,属性值)

prop(属性名,属性值)

1. 样式

css(样式名称,样式值)

1. 遍历

each()

1. value值

val()