jquery中$()的使用
在jquery中最常使用的就是$这个符号了,在我没有系统的学习jquery之前,我用到的$都是用于对元素的选择,而这只是$的很简单的用法。在jquery$()函数一共有三种用法:
- $(selector,context)
在这个方法中selector是选择器,context是所选择的元素所处的容器,可以是DOM 元素集、文档或 jQuery 对象。
比如:
$('input',document.forms[0])
这行代码的意思是在html文档的第一个form中查找所有的input元素。当然如果把这个form设置id或class(例如将class设置为'form1'),就可以修改为下面的代码:
$('.form1 input')
这两行的代码是等效的。
更深一步,我们可以把context参数也设置为选择器,比如下面的html代码:
<ul id = 'password'> <li class = 'pa'><p>111</p></li> <li><p>222</p></li> <li class = 'pa'><p>333</p></li> <li><p>444</p></li> <li class = 'pa'><p>555</p></li> </ul>
js代码如下:
$(function(){ $('p','#password .pa').html('this is the paragraph');; });
我们要把ul中类名为pa中的p的内部html代码修改为‘this is the paragraph',这个时候运行之后的情形恰如我之前所想。在这种情况下,$()函数的形式就如同$('password .pa').find('p'),二者也是一样的效果。
2. $(html,ownerDocument)
html:用于动态创建DOM元素的html标记字符串;
prop:是为所创建的DOM元素添加的属性、方法、事件。
比如:
$('div',{ 'class':'demo', 'text':'this is the demo of the function$()', click:function(){ alert('you click a div'); } }).appendTo('body');
上面的代码动态创建了一个div并将其添加到了body中,同时设置了这个div的类名,内部文本,绑定click函数。
3. $(callback): $(document).ready()的缩写
这个函数形式是最常用的,callback表示当DOM加载完成后所要执行的函数。
比如:
$(function(){ alert('this paragraph will appear after the DOM loaded'); });
上面的代码就很容易懂了,就是在DOM文档都加载完毕之后,才会弹出一个警告框。