jquery in action 学习笔记

1

面对对象的编程

1.引用传递

在javascript中,string int Boolean 不是按引用进行传递的.而对象和数组是按引用传递的.

示例:

 // Create an array of items
var items = new Array("one", "two", "three");
// Create a reference to the array of items
var itemsRef = items;
// Add an item to the original array
items.push("four");
// The length of each array should be the same,
// since they both point to the same array object
alert(items.length == itemsRef.length);

结果是 true

2.每一个Function中都有一个上下文变量arguments,它是一个伪数组(不可以改变).它代表着当前Function的参数列表.

 在javascript中,变量的作用域是整个Function,而不是{}.这点有别于c#等其他语言.

// Set a global variable, foo, equal to test
var foo = "test";
// Within an if block
if (true) {
// Set foo equal to 'new test'
// NOTE: This is still within the global scope!
var foo = "new test";
}
// As we can see here, as foo is now equal to 'new test'
alert(foo == "new test");
// Create a function that will modify the variable foo
function test() {
var foo = "old test";
}
// However, when called, 'foo' remains within the scope
// of the function
test();
// Which is confirmed, as foo is still equal to 'new test'
alert(foo == "new test");

// A globally-scoped variable, containing the string 'test'

var test = "test";

// You'll notice that our 'global' variable and the test

// property of the the window object are identical

alert( window.test == test );

全局变量可以理解为window的属性.

编写javascript代码时的一些注意事项:

1. 要对使用的变量进行声明.以避免不同的作用域时的冲突.
2. 理解0 false ‘’ undefined null 这些值在javascript里是相同的,都等于false.

// Both of these are true

null == false

0 == undefined

// You should use !== or === instead

null !== false

false === false

DOM 编程

<p><strong>Hello</strong> how are you doing?</p>

使用DOM的时候,小心一些空白(text)造成的影响,经常使你能找到自己想要的目标元素. function cleanWhitespace( element ) {

// If no element is provided, do the whole HTML document

element = element || document;

// Use the first child as a starting point

var cur = element.firstChild;

// Go until there are no more child nodes

while ( cur != null ) {

// If the node is a text node, and it contains nothing but whitespace

if ( cur.nodeType == 3 && ! /\S/.test(cur.nodeValue) ) {

// Remove the text node

element.removeChild( cur );

// Otherwise, if it's an element

} else if ( cur.nodeType == 1 ) {

// Recurse down through the document

cleanWhitespace( cur );

}

cur = cur.nextSibling; // Move through the child nodes

}

}

 使用nodeType属性.

Element (nodeType = 1):如li a input select等元素.

Text (nodeType = 3): 匹配文本元素

Document (nodeType = 9): This matches the root element of a document.

获取元素内的文本内容

需要注意的是innertext在非mozilla浏览器中可以使用,火狐中无法使用.

Listing 5-15. Getting the Text Contents of the <strong> Element

// Non-Mozilla Browsers:

strongElem.innerText

// All platforms:

strongElem.firstChild.nodeValue

获取元素内的html

• Mozilla-based browsers don’t return the <style> elements in an innerHTML statement.

• Internet Explorer returns its elements in all caps, which if you’re looking for consistency

can be frustrating.

• The innerHTML property is only consistently available as a property on elements of HTML DOM documents; trying to use it on XML DOM documents will result in retrieving null values.

获取或设置一个元素的属性值 getAttribute SetAttribute.

Jquery代码学习

Jquery in action 选择器部分学习

Ul li a 不管多少层次,会选中所有符合ul li 下的a.不管多少层级.

Ul li>a 只选择直接孩子的a标签.

Li:has(a)容器选择器,选择包含链接的li元素以进行某项操作.

通过位置进行定位的选择器.

  

Jquery自定义的筛选选择器:

 //防止重复提交的一个方法 w3c官方推荐的属性设置

            $("form").submit(function () {
$(":submit").attr("disabled", "disabled");
});