JS、jQuery

JS

一、词法结构

1.区分大小写

2.注意 //单行 /* 多行注释 */

3.字面量(直接量 literal)

12 数字

5.8 小数

“hello”

‘hello’

true

/js/gi //正则

null //空

{x:1,y:2}

{1,2,3,4}

4.标识符(变量)和保留字

5.分号可以省略但是可能会产生问题,js会自动补

二、类型、值和变量

1.原始类型 数字 字符串 布尔 null空 undefined未定义

2.对象类型

3.类 Array Function Date RegEx Error

4.js解析器 中集成了垃圾回收

5.任意js的值都可以转成布尔值

undefined null 0 -0 NaN “” 都被转换为false

6.包装对象

var = “hello”; //原始类型(没有方法)

s.len = 4; //当调用原始类型的属性或方法的时候(原始类型是没有属性和方法的)

//只要引用了字符串的属性或方法,就会调用new String(s)把原始类型,包装成对象

//以后调用了s.len是调用String对象的属性和方法,一旦引用结束,新创建的临时对象会销毁

var n = s.len //此时为undefined

alert(n);

//调用字符串 布尔 数字的属性或方法时,创建的临时对象。是包装对象

显示定义包装对象 var S = new String(“hello”)

var s = “hello”;是不同的

7.==和===

8.类型转换

var n = 7;

alert(n.toString(2)); //二进制 10001

alert(n.toString(8)); //021

alert(n.toString(16)); //0x21

alert(n.toString(10));  alert(n.toString());

9.toString() valueOf()

var date = new Date(2011,1,3);

date.value() 返回毫秒数代表的时间

10.js是动态类型 var n=10; 程序运行期间 才会确定变量的类型

11.变量作用域

函数作用域和声明提前

函数内定义的变量 声明自动提前到函数顶部

12.作用域链scope chain

在不包含函数的函数体内,作用域链有两个对象,第一个是定义函数

参数和局部变量的对象,第二个是全局对象

在一个嵌套函数体内,作用域链上至少有三个对象

定义一个函数时,它保存了一个作用域链。调用函数时,它创建一个新的对象存储它的局部变量,并将这个对象添加到保存的那个作用域链上,同时创建一个新的更长的表示函数调用作用域的“链”。对于嵌套函数没错调用外部函数时,内部函数会重新定义一遍。每次调用外部函数的时候作用域链是不同的。

13.delete in eval void

第五章 对象

1.对象的基本操作 create set query delete test enumerate

2.对象的属性特性 可写 可枚举 可配置(是否可删除)

3.对象的对象特性

对象的原型 prototype

对象的类 标志对象类型的字符串

对象的扩展标记 是否可添加新属性

//创建对象的三种方法

4.对象直接量

var empty = {};

var point - {x:0,y:0}

5.new 创建对象

var o = new Object{}; 空对象 和{}一样

var a = new Array();

6.Object.create()

var o1 = Object.create{{x:1,y:2}}; //o1继承自对象原型{{x:1,y:2}}

var o2 = Object.create{null} //o2不继承任何属性和方法

var o3 = Objet.create(Object.protptype); //空对象和{}new Object()一样

7.属性的操作 作为关联数组的对象

object.property

object[“property”] 散列 映射 字典 关联数组

8.继承

js的继承只能从父类获取属性的值,而不是修改原型链

如果对象book为null或underlined

book.subtle.length 会报错

解决方法

var len = book && book.subtitle&&book.subtitle.length;

删除属性

delete book.subtitle

检测属性

in has()OwnPreperty() propertyIsEnumerable()

var o = {x:1};

“x”in o

“toString” in o

hasOwnPreperty();判断属性是否是自己的。继承属性返回false

propertyIsEnumerable()只有是自有属性,并可枚举

获取所有属性

Object.keys();

Object.getOwnProepertyNames()

9.属性 getter 和 setter

var o ={

x:0;

y:1;

set r (value){value = this.r;}

get r(){return this.x + this.y}

};

x是数据,r存取器属性

10.属性的特性 ecmascript5 老的ie不支持如下用法

数据属性的特性:值value 可写性writable

可枚举 enumerable

可配置 configurable

存取器属性特性: get set

可枚举 enumerable

可配置 configurable

//返回{value:1,writable:true,remunerable:true,configurable:true}

Object.getOwnPropertyDescriptpr{{x:1},x}

//查不到属性 返回undefined

设置属性的特性 不能修改继承的属性特性

Object.defineProperty()

//设置不可枚举属性

var o = {};

Object.defineProperty(o,”x”,{

value:1,

writable:true,

remunerable:false,

configurable:true

})

//设置只读

Object.defineProperty{o,”x”,{writable:false}}

修改多个属性特性

Object.defineproperties()

扩展Object.protptype 书 P137

11.对象的三个属性

prototype class extensible attribute

查询对象的原型

ecmascript5 中 Object.getProrotypeOf(o1)

ecmascript3 中 o1.constructor.prototype

通过对象直接量或new Object()方式创建的对象

包含一个constructor的属性,指Obcjet()的构造函数

constructor.prototype才是真正的原型

p.isPrototypeOf{o}检测对象p是否是o的原型

//获取对象的类型 字符串

Object.prototype.toString.call(o1).slice(8,-1)

12.对象的可扩展性

对象是否可以新加属性

Object.preventExtensions() 设置对象不可扩展

Object.isExtenslible()

Object.seal()除了将对象设置为不可扩展,还将属性设置为不可配置

Object.freeze()

除了将对象设置为不可扩展。将属性设置为不可配置,还把属性设置为只读

第八章 函数

1.函数调用 方法调用

function t(){}

t(); 函数调用 this是全局对象 严格模式下是undefined

var o = {a:function(){}};

o.a() 方法调用 this是当前调用的对象

2.构造函数调用

car o = new Object(); var o = new Object;

o 继承自构造函数的prototype属性 内部的this是此对象

var r = new o.m(); 中的this不是o

3.P184 函数的执行用到了作用域链,这个作用域链是函数定义的时候创建的。

嵌套的函数f()定义在这个作用域里,其中的变量scope是局部变量

作用域链

调用s()将创建函数s的执行环境(调用对象),并将该对象置于链表开头,

然后将函数t的调用对象链接在之后,最后是全局对象。然后从链表开头寻找变量name

调用ss() ss()==>t()==>window

name=“lwy”;

function(){

var name=“tlwy”;

function(){

var name = “slwy”;

console.log(name);

}

function ss(){

console.log(name);

}

s();

ss();

}

t();

每次调用函数,都会生成一个新的作用域链。包括新的内部变量。

jQuery HTML

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

jQuery attr() 方法用于获取属性值。

text()html() 以及 val() 的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

通过 append()  prepend() 方法添加若干新元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。

不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

jQuery after()  before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法:

  • width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
  • height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
  • innerWidth() 方法返回元素的宽度(包括内边距)。
  • innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery  遍历

什么是遍历?

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

提示:祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。

遍历方法中最大的种类是树遍历(tree-traversal)。

下一章会讲解如何在 DOM 树中向上、下以及同级移动。

jQuery 祖先

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

  • parent() 方法返回被选元素的直接父元素。
  • parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
  • parentsUntil()  方法返回介于两个给定元素之间的所有祖先元素。

jQuery 后代

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

  • children() 方法返回被选元素的所有直接子元素。
  • find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

jQuery 同胞

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings() 方法返回被选元素的所有同胞元素。
  • next() 方法返回被选元素的下一个同胞元素。
  • nextAll() 方法返回被选元素的所有跟随的同胞元素。
  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

jQuery 过滤

缩写搜索元素的范围

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。

方法 描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
时间: 2024-10-17 11:51:11

JS、jQuery的相关文章

js、jquery图片的局部放大

原文:js.jquery图片的局部放大 源代码下载地址:http://www.zuidaima.com/share/1550463733484544.htm 图片的局部放大(和淘宝上商品详情查看图片那里差不多)

简单的表单验证(js、jquery)

//javascript代码 function valForm(){ var username=document.getElementById("username"); var pwd=document.getElementById("pwd"); var repwd=document.getElementById("repwd"); var email=document.getElementById("email"); va

js、jQuery实现2048小游戏

一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会增加一个数字. 当16宫格中没有空格子,且四个方向都无法操作时,游戏结束. 三. 游戏目的: 目的是合并出2048这个数字,获得更高的分数. 四. 游戏截图:  五.先来玩一下: 开始游戏 查看源码 六.游戏实现原理: 使用js.jQuery实现了PC版及手机版,实现原理是一样

原生js、jQuery实现选项卡功能

在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边开始写代码了: HTML代码: <ul> <li class="click">red</li> <li>blue</li> <li>yellow</li> </ul> <div class

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

Js、Jquery对goTop功能的实现

本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能,以及在这个过程中碰到的问题. 终于实现的效果类似:http://sc2.163.com/home(注意右下角的top) 代码: Jquery <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>

js、jquery中判断checkbox是否被选中的方法

在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input[type='checkbox']").is(':checked') 返回true或false attr()方法  设置或者返回备选元素的值 attr(属性名)    //获取属性的值 attr(属性名,属性值)   //设置属性的值 ---- $("#id]").attr(&q

前端js、jQuery实现日期格式化、字符串格式化

1. js仿后台的字符串的StringFormat方法 在做前端页面时候,经常会对字符串进行拼接处理,但是直接使用字符串拼接,不但影响阅读,而且影响执行效率,且jQuery有没有定义字符串的StringFormat方法,只好自己写一个. function StringFormat() { if (arguments.length == 0) return null; var str = arguments[0]; for (var i = 1; i < arguments.length; i++

js、jquery对节点的操作(增、删)

js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("one").parentNode; 2.兄弟节点的获取 nextElementSibling和nextSibling属性配合使用. 某节点的nextElementSibling属性值是该节点后面紧邻的兄弟节点,但是这个有兼容性,在ie9以上版本(包含ie9)和其他浏览器,结果是我们想要的弟节点,在ie