jquery中$()的使用

在jquery中最常使用的就是$这个符号了,在我没有系统的学习jquery之前,我用到的$都是用于对元素的选择,而这只是$的很简单的用法。在jquery$()函数一共有三种用法:

  1. $(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文档都加载完毕之后,才会弹出一个警告框。

posted @ 2016-08-15 14:50  泛舟青烟  阅读(520)  评论(0编辑  收藏  举报