JQuery

Posted on | In |

完整教程：how2j

1.hello jquery

1.1 使用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
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});

</script>

<button id="b1">隐藏div</button>

<button id="b2">显示div</button>

<br>
<br>

<div id="d">

这是一个div

</div>

1.2 理解 $(function(){});

  • $();表示文档加载 fuction(){}具体方法
  • 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
  • 另一种写法 $(document).ready(fuction(){});

1.3 通过id获取元素

  • 与javascript通过id获取元素节点的方式(document.getElementById )不同
    JQuery通过 $(“#id”) 就可以获取了
1
2
3
4
5
6
7
8
9
10
11
12
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script >

$(function(){
  document.write( $("#d") );
  document.close();
});

</script>

<div id="d">Hello JQuery</div>

1.4 增加监听器

  • $(“#b1”).click(function(){alert(“点击了按钮”);});
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script >

$(function(){
     $("#b1").click(function(){
        alert("点击了按钮");
     });
});

</script>

<button id="b1">按钮</button>

2.常见方法

  • val html text

2.1 val 取值

  • alert($(“#input1”).val());

    2.2 html 获取元素内容 有子元素则保留标签

  • alert($(“#d1”).html());

3.css

3.1 addClass 方法 添加类样式

  • $(“#d”).addClass(“pink”);
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
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");
   });

});

</script>
  <button id="b1">增加背景色</button>
<br>
<br>

<style>
.pink{
   background-color:pink;
}
</style>

<div id="d">

Hello JQuery

</div>

3.2 removeClass 删除类样式

  • $(“#d”).removeClass(“pink”);

3.3 切换类样式

  • 这里的切换，指得是： 如果存在就删除 如果不存在，就添加
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
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
$(function(){
   $("#b1").click(function(){
      $("#d").toggleClass("pink");
   });

});

</script>
  <button id="b1">切换背景色</button>
<br>
<br>

<style>
.pink{
   background-color:pink;
}
</style>

<div id="d" >

Hello JQuery

</div>

3.4 css 直接设置样式

1
2
3
4
5
6
7
$("#b1").click(function(){
     $("#d1").css("background-color","pink");
  });

  $("#b2").click(function(){
     $("#d2").css({"background-color":"pink","color":"green"});
  });

4.选择器

  • Jquery有多达数十种选择器 每种有一堆
  • 选择器种类：元素 id 类 层级 最先最后 奇偶 可见 属性 表单对象 表单对象属性 当前元素
  • 元素选择器：$(“div”).addClass(“pink”);
  • id选择器： $(“#d1”).addClass(“pink”);
  • 类选择器：$(“.d”).addClass(“pink”);
  • 最先最后：$(“div:first”).addClass(“pink”) $(“div:last”).addClass(“pink”)
  • 奇偶：$(“div:odd”).toggleClass(“pink”); $(“div:even”).toggleClass(“pink”);
  • 可见性： $(“div:visible”).hide(); $(“div:hidden”).show();
  • 其他见how2j

5.筛选器

  • 建立在选择器的基础上(eg：选择多个div)

5.1 $(“div”) 从0开始 从上到下 div位置筛选

  • $(“div”).first().toggleClass(“pink”);
  • $(“div”).last().toggleClass(“pink”);
  • $(“div”).eq(4).toggleClass(“pink”);

5.2 div 父 祖先筛选

  • $(“#currentDiv”).parent().toggleClass(“b”); });
  • $(“#currentDiv”).parents().toggleClass(“b”);});

5.3 div 儿子 后代筛选

  • $(“#currentDiv”).children().toggleClass(“b”);
  • $(“#currentDiv”).find(“div”).toggleClass(“b”);

6.属性

  • 通过attr获取属性并修改：$(“#h”).attr(“align”,”right”) ;//设置样式
  • 删除属性： $(“#h”).removeAttr(“align”);});
  • prop与attr的区别 见how2J

7.效果

  • 显示 影藏 切换 滑动 渐影

8.事件

  • 文档加载事件 点击事件 键盘事件 鼠标事件 焦点 改变 提交

9.ajax

  • 提交ajax请求 ：$.ajax $.get() $.post
  • load() serialize
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="checkResult"></div>

输入账号 :<input id="name" type="text">

<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });
   });
});

</script>
1
2
3
4
5
6
7
$.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
);
1
2
3
4
5
6
7
$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);

9.1 serialize()： 格式化form下的输入数据

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
<script src="http://how2j.cn/study/jquery.min.js"></script>

<div id="checkResult"></div>
<div id="data"></div>
<a href="http://how2j.cn/study/checkName.jsp">http://how2j.cn/study/checkName.jsp</a>

<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>

</form>

<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "http://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});

</script>

10.数组操作

  • 遍历 去重 $.inArray 返回元素在数组中的位置
1
2
3
4
5
6
7
8
<script>
var a = new Array(1,2,3);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();

</script>

11.字符串操作

  • $.trim() 去除首尾空白 $.trim(“ Hello JQuery “)

12.$.parseJSON() 将JSON格式的字符串，转换为JSON对象

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>

var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;

document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = $.parseJSON(s3);

document.write("这是一个JSON对象: " + gareen);

</script>

13.对象转换

  • JQuery转DOM DOM转JQuery