jquery总结

jQuery 很容易学习。

此刻心情：天子呼来不上船，自称臣是酒中仙

前言

1
2
3


- 在线Jquery使用：https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide  
- cdn导入Jqeury: <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
- Jquery字典：https://www.w3school.com.cn/jquery/index.asp

~~B站很好的教程~~(找不到了，呜呜呜)

等整个html加载完毕后，加载javascript，很重要的，不然jquery可能找不到元素！

1
2
3
4
5
6


$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

笔记

1. 选择一个元素

$("#nihao")，语法$("XXX")，XXX是要选择的元素，跟css选择是一样的#是id,.是class

选择元素的内容，表单和元素选择的方式各不相同

1
2
3


text() # 设置或返回所选元素的文本内容
html() # 设置或返回所选元素的内容（包括 HTML 标记）
val() # 设置或返回表单字段的值

2. 点击事件

1
2
3


$("#luo").click(function() {
  alert("123");
});

3. hover事件(鼠标移入移出)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 方式一
$("#nihao").mouseenter(function() {
  alert("你进来了");
});
$("#nihao").mouseleave(function() {
  alert("你出去了");
});

// 方式二
$("#hover").hover(function() {
  $(this).html("鼠标进入");
}, function() {
  $(this).html("鼠标移出");
});

4. summit事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// 方式1 直接触发
$("#f").submit(function(e) {
  alert("进入");
  if ($("#name").val() == "baidu") {
    alert("是百度");
    return true;
  } else {
    alert("不是百度")
    return false;
  }
});

// 方式2 间接触发
function c(){
  $("#f").submit();
}
<span onclick="c()">点我出发submit事件</span>

5. 显示与隐藏(可以做很多好玩的)

1
2
3
4
5
6


$("#hide").click(function(){
  $("#hide_show_text").hide();
});
$("#show").click(function(){
  $("#hide_show_text").show();
});

6. toggle(开关事件)

1
2
3


$("#toggle").click(function(){
  $("#hide_show_text").toggle();
});

7. 动画事件

1
2
3
4
5
6


$("#hide2").click(function(){
  $("#hide_show_text2").hide(1000);
});
$("#show2").click(function(){
  $("#hide_show_text2").show(1000);
});

8. 点击事件

1
2
3


$("#btn1").click(function(){
  alert("我被点击了");
});

jquery总结

相关文章：