JQuery学习二（获取元素控件并控制）


 

$(’#id‘).+function;

例如：

 1 <head>
 2     <title>JQuery</title>
 3         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 4         <script type="text/javascript">
 5             $(function () { alert($('#div1').text()); });
 6             $(function () { alert($('#div1').html()); });//通过这两种函数调取的内容不一样。
 7         </script>
 8 </head>
 9 <body bgcolor="blue">
10     <div id="div1">你好呀<font color="red">朋友</font></div>
11 </body>
12 </html>

$('#id').html();和$('#id').text()中有参数就说明是赋值，没有参数就是取值

$(dom对象)可以将dom转换成jquery对象。

Jquery函数没有封装的函数必须使用dom对象。

可以通过var domobj=jquery[0]或者var domobj=jquery.get[0]的方式将Jquery对象转换成dom对象。

 1 <head>
 2     <title>JQuery</title>
 3         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 4         <script type="text/javascript">
 5             $(function(){
 6                 var div = $('#div1')[0];
 7                 alert(div.innerText);
 8                 alert(div.innerHTML);})
 9         </script>
10 </head>
11 <body bgcolor="blue">
12     <div id="div1">你好呀<font color="red">朋友</font></div>
13 </body>
14 </html>

$('#id').css(“background”,"red")或者$('#id').css("background"),分别是可以用来赋值和取值

1   <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
2         <script type="text/javascript">
3             $(function () {
4                 alert($(document.body).css("background-color"));
5                 $(document.body).css("background", "red");
6             })
7 
8         </script>

 

$('#id').val()有参数就是赋值，无参数就是取值

 1 <head>
 2     <title>JQuery</title>
 3         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
 4         <script type="text/javascript">
 5             $(function () { $('#text1').val(new Date()); })
 6             $(function () { alert($('#text1').val()); })
 7 
 8         </script>
 9 </head>
10 <body bgcolor="blue">
11     <input type="text" id="text1" />
12 </body>
13 </html>

$('.className')    $('p')$('input')等$("#id")三种主要的获取控件的方式

$("div li")获取div下面的所有li元素

$("div > li")获取仅直接在div下面的li元素

$("div + item")获取div后面的第一个item 元素

$("div~item")获取div后面的所有item元素

 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>JQuery</title>
 5     <style type="text/css">
 6         .warning {
 7             background-color:yellow;
 8         }
 9     </style>
10         <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script>
11         <script type="text/javascript">
12             $(function () { $('p').html("<font color='red'>我们都是p</font>") });
13             //$('p').html("<font color='red'>我们都是p</font>")这段代码不能单独执行，
14             //这样它会发生在<P>控件加载完毕之前，无法将下面的相应控件进行赋值
15            $(function () { $('p').click(function () { alert('我是p'); }) })
16             
17             $(function () { $('.warning').click(function () { alert("这里有警告信息！") }) })
18             $(function () { $("div > p").click(function () { alert("这里是div下面的p！"); }) })
19             //通过$().click()可以为这一个事件赋予多个执行函数
20         </script>
21 </head>
22 <body bgcolor="blue">
23     <p></p>
24     <p></p>
25     <p></p>
26     <div>这里没事！</div>
27     <div class="warning">这是警告信息</div>
28     <div class="warning"></div>
29     <div class="warning">here</div>
30     <input class="warning"value="点我呀" />
31     <div><p>请勿触碰</p></div>
32     
33 </body>
34 </html>

 

posted @ 2014-11-15 17:28  SYTM  阅读(276)  评论(0)  编辑  收藏  举报