分享程序员开发的那些事...
更新时间：2022-09-06 07:47:38
Created by Jerry Wang on Sep 02, 2014
<html> <script> function myprint() { console.log("hello world"); } </script> <script src="./jquery_1.7.1.js"> </script> <script> function register_event() { var acollections = $("a"); console.log("number of a: " + acollections.length); acollections.click(function(){ console.log("function registered via Jquery is called"); }); } </script> <body onload = "register_event();"> <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" >jQuery</a> </body> </html>
case1: 为tag a注册click 事件处理函数
点击tag a后输出如下:
若source code改为如下，则点击tag a时不会触发console.log，因为在匿名函数执行时body page尚未完成render，$("a")返回为空，因此click事件的注册实际上没有进行。
注册事件处理函数可加上参数source: ```JavaScript acollections.click(function(source){ console.log("function registered via Jquery is called on: " + source.currentTarget.id); } ``` 则click事件发生的element id也能打印出来:
case2: 打印某tag inner html source code 在case1的html中加入如下code:
Hello world
!
在register_event函数末尾加入如下code: ```JavaScript console.log($("div>span").html()); ``` 输出div tag内的子节点span的全部html
source code:另一种用法: find method前可加限制条件（从指定的dom node开始查找) console.log("searching span node in whole page: " + $(document).find("div>span").html()); 注：$('div>ul')和$('div ul')是有区别的: $('div>ul')是
的直接后代里找
; 而$('div ul')是在
的所有后代里找
。 ```JavaScript var noClass = $('body p:not(.c_three)'); // 返回body node下所有类型为p的子节点，这些子节点不包含class c_three. ``` ```JavaScript var withTitle = $('a[title]'); // 返回所有拥有title属性的a tag. ``` ```JavaScript var child = $('a[title^="tit"]') // 返回所有title属性为tit开头的a tag. ``` ```JavaScript var child = $('a[title$="e"]') // 返回所有title属性为e结尾的a tag. ``` ```JavaScript $('td:contains("Henry")').prev()——内容包含有"Henry"的的上一个节点 $('td:contains("Henry")').next()——内容包含有"Henry"的的下一个节点 $('td:contains("Henry")').siblings()——内容包含有"Henry"的的所有兄弟节点 ``` case3: 动态添加dom node $("
Hello").appendTo("body");
jquery selector 默认返回的结果集是array，如果想获得dom element，需要使用get method: