<aside> 💡 JQuery和ajax很容易学习

</aside>

前言

• 在线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

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

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

1. 选择元素

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

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

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

$("#id").attr("href") 获取属性

2. 点击事件

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

3. summit事件

// 方式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>

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

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

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

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

$("#hide").click(function(){
  $("#hide_show_text").hide(); // 如果参数是1000，表示1秒内隐藏
});
$("#show").click(function(){
  $("#hide_show_text").show();  // 如果参数是1000，表示1秒内展示
});