一、jQuery的常用方法运用示例

 1 // 页面加载之后执行
 2 $(function(){
 3     // 事件的绑定方式1
 4     $("#bt3").bind("click",function(){
 5         var old= $("#img_id").prop("width");    
 6         $("#img_id").prop("width",old+100);
 7     });
 8                 
 9     // 事件的绑定方式2
10     $("#bt4").click(function(){
11         //操作属性值
12         var old= $("#img_id").prop("width");
13         $("#img_id").prop("width",old-100);    
14         //操作value值
15         this.value;//this获取的js对象,所以要使用value来获取属性值
16         var value= $(“#username”).val();//获取value属性的属性值
17         $(“#username”).val(“aa”);    //设置value属性的属性值,value方法只能用于:包含“value”属性的表单
18         //操作html内容
19         var str = $(“#aid”).html();
20         $(“#divid”).html(“<a href=“#”>abced</a>”);
21         //操作文本
22         var str = $(“#aid”).text();
23         $(“#pid”).text(“abced”);
24         //操作css属性
25         $(“#pid”).css(“color”,“red”);
26     });            
27 );

二、jQuery基础知识

1 jquery对象和js对象的相互转换

1.1 认识互相的分歧

a. 来源差异

  • 经过“document.getElementById()”得到对象是:js对象。
  • 经过“$(选用器)”得到对象是:jquery对象

    b. 使用情势不一样

  • js对象,使用性质,进行操作

  • jquery对象,使用办法开展操作(示例中存有办法等)

 

c. 怎样判断是jquery对象和js对象(重点)

  • 只要有一个对象,放在那里,怎么着判定,他是js对象,仍旧Jquery对象?
    • 感知法:
      • alert(item.innerHTML);
      • alert(item.html());

1.2 js对象 –> jquery对象

1.2.1 js对象–>
jquery对象

a. 语法

  • 把js对象p转换成jQuery对象: $(p),特别注意,不要写成: $p,
    $(“p”)

    b. 演示

class=”Apple-tab-span”> // 获得 class=”s2″>js class=”s4″>对象

class=”Apple-tab-span”> var js_item
=document.getElementById(“h1_id”);  

 

class=”Apple-tab-span”> // 转换成 class=”s3″>jquery对象( class=”s2″>推荐用“$”便于差别 class=”s3″>,不是胁迫要求 class=”s3″>)

class=”Apple-tab-span”> var $jquery_item =
$(js_item);

 

class=”Apple-tab-span”> // jquery对象使用 class=”s2″>jquery class=”s4″>方法

class=”Apple-tab-span”>
$jquery_item.css(“background-color”,”red”);

1.2.2 jquery对象 –> js对象

a. 语法

  • 把jQuery对象(q)转换成js对象:q[0]或者q.get(0)

    b. 演示

class=”Apple-tab-span”> — class=”s4″>准备数据

class=”Apple-tab-span”> <h1 id=”h1_id”> class=”s4″>我是中夏族 class=”s2″></h1>

        –js代码

class=”Apple-tab-span”> // class=”s4″>获得jquery class=”s4″>对象

class=”Apple-tab-span”> var
#jquery_item =  $(“#h1_id”);

 

class=”Apple-tab-span”> // class=”s4″>转换成js对象 class=”s2″>(方式 class=”s2″>1)

class=”Apple-tab-span”> var
js_item1=#jquery_item[0];

 

class=”Apple-tab-span”>
alert(js_item1.innerText); //使用 class=”s2″>js class=”s4″>方法

 

class=”Apple-tab-span”> // class=”s4″>转换成js对象 class=”s2″>(方式 class=”s2″>2)

class=”Apple-tab-span”> var
js_item2=#jquery_item.get(0);

class=”Apple-tab-span”>
alert(js_item2.innerText); // 使用 class=”s2″>js class=”s4″>方法

2 jquery的加载顺序

2.1. 定义

  • 和js一样,jquery也设有加载顺序难点。
  • jquery自个儿包裹了一个document的ready方法,即“页面加载成功时”触发该格局。 

2.2 语法

  • $(document).ready(当页面加载成功时要推行的函数)

2.3 特点

  • jQuery,$(document).ready(当页面加载成功时要实践的函数),其成效类似于:js中window的onload事件
  • 两者比较来看,ready事件实施时机比onload事件早,其余,可以频仍实践。

2.4 使用演示

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset=”UTF-8″>

            <title></title>

            <script type=”text/javascript”
src=”../js/jquery-1.8.3.js”></script>

 

            <script
type=”text/javascript”>

                // class=”s4″>加载完直接弹框

                $(document).ready(function(){

                        alert(” class=”s4″>加载完直接弹框”);

                    }

                );

                // class=”s4″>加载后完毕按钮的绑定

                $(document).ready(function(){

                   
$(“#but_id”).bind(“click”,function(){

                        alert(” class=”s4″>点击了测试按钮”);

                    });

                });

            </script>

        </head>

        <body>

            <input id=”but_id” type=”button”
value=”测试 class=”s2″>”/><br>

        </body>

    </html>

2.5 偷懒的写法

$( class=”s2″>当页面加载成功时要推行的函数 class=”s3″>)

$(function(){});

3 选用器获得八个要素的遍历方法

3.1 得到元素的个数

a. 使用演示

  • $(“h1”).length

3.2 each方法–jquery方法

a. 语法

  • $(selector).each(function(index,element)) 

// 留心这里,element是js对象,表示成分的目录(次序)

 

b. 使用

class=”Apple-tab-span”> — class=”s4″>准备数据

class=”Apple-tab-span”> <h1
class=”bbb”>aaa<strong>bbb1</strong>ccc</h1>

class=”Apple-tab-span”> <h1
class=”bbb”>aaa<strong>bbb2</strong>ccc</h1>

class=”Apple-tab-span”> <h1
class=”bbb”>aaa<strong>bbb3</strong>ccc</h1>

 

class=”Apple-tab-span”> $(“h1”).each(function(index,
element){

class=”Apple-tab-span”>
alert(index);

class=”Apple-tab-span”>
alert(element.innerText);  

class=”Apple-tab-span”> });

3.3 each搭配this使用

class=”Apple-tab-span”>
$(“h1”).each(function(index){

class=”Apple-tab-span”>
alert(index);

class=”Apple-tab-span”>
alert(this.innerText);  // 留心那里: class=”s2″>this是js class=”s4″>对象

class=”Apple-tab-span”> });

相关文章

网站地图xml地图