jquery总结

jquery总结,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("我被点击了");
});
updatedupdated2022-05-092022-05-09