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代码时的一些注意事项:
- 要对使用的变量进行声明.以避免不同的作用域时的冲突.
- 理解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");
});
