jQuery-初始-二把利器-核心函数-对象

作者: 鲁智深 分类: jQuery 发布时间: 2016-05-17 01:00

初识jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
  <meta charset="UTF-8">
  <title>01_初识jQuery</title>
  <!--
  方式一: 使用原生JS实现功能
  -->
  <script type="text/javascript">
    window.onload = function () {
      var btn = document.getElementById('btn1')
      btn.onclick = function () {
        alert(document.getElementById('username').value)
      }
    }
  </script>
</head>
<body>
<!--需求: 点击"确定"按钮, 提示输入的值-->
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>

jQuery的二把利器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery的二把利器</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()
2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使用jQuery对象: $obj.xxx()
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</body>
</html>

jQuery核心函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_jQuery核心函数</title>
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
</head>

<body>

<div class = "div">
  <button id="btn">测试</button>
  <br/>

  <input type="text" name="msg1"/><br/>
  <input type="text" name="msg2"/><br/>


</div>


<!--
1. 作为一般函数调用: $(param)
  1). 参数为函数 : 当DOM加载完成后,执行此回调函数
  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  3). 参数为DOM对象: 将dom对象封装成jQuery对象
  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
  1). $.each() : 隐式遍历数组
  2). $.trim() : 去除两端的空格
-->

<script>
   $(function(){
        $("#btn").click(function(){
          alert($(this).html())

          $('<input type="text" name="msg3"/><br/>').appendTo('div');//控制标签
          $('<input type="text" name="msg2"/><br/>').appendTo('.div');//控制 class
        })
   })

    //遍历数组
    var arr = [1, 2, 3, 4, 5];
    $.each(arr,function (index,item) {
         console.log(index,item);
    })

     /*需求3. 去掉"  my atguigu  "两端的空格*/
    var str = '  my stguigu   ';
    console.log(str.trim());//原生方法
    console.log($.trim(str));//jquery方法
</script>

</body>

</html>

jQuery对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>04_jQuery对象</title>
</head>

<body>
<button>测试一</button>
<button>测试二</button>
<button>测试四</button>
<button id="btn3">测试三</button>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>
    /*
   需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */



    $(function(){
      var $btns = $('button');
      //需求1. 统计一共有多少个按钮
      console.log($btns.size(),$btns.length);

      //需求2. 取出第2个button的文本,*[index]/get(index): 得到对应位置的DOM元素
      console.log($btns[1].innerHTML);
      console.log($btns.get(1).innerHTML);

      //需求3. 输出所有button标签的文本,/*each(): 遍历包含的所有DOM元素*/
      $btns.each(function(){
          console.log(this.innerHTML);
      })

      //需求4. 输出'测试三'按钮是所有按钮中的第几个
      console.log($('#btn3').index());
    })
</script>

</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注