jquery安装

• 下载jquery的js包后，用script标签引入

语法

简介

• jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。通常jQuery代码写在如下的代码块中。

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

// 也有简写形式
$(function(){
    // 执行代码
});

选择器

• 元素选择器

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

• #id 选择器

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

• .class 选择器

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

• 其他选择器

$("*")	// 选取所有元素	
$(this)	// 选取当前 HTML 元素	
$("p.intro")	// 选取 class 为 intro 的 <p> 元素	
$("p:first")	// 选取第一个 <p> 元素	
$("ul li:first")	// 选取第一个 <ul> 元素的第一个 <li> 元素	
$("ul li:first-child")	// 选取每个 <ul> 元素的第一个 <li> 元素	
$("[href]")	// 选取带有 href 属性的元素	
$("a[target='_blank']")	// 选取所有 target 属性值等于 "_blank" 的 <a> 元素	
$("a[target!='_blank']")	// 选取所有 target 属性值不等于 "_blank" 的 <a> 元素	
$(":button")	// 选取所有 type="button" 的 <input> 元素 和 <button> 元素	
$("tr:even")	// 选取偶数位置的 <tr> 元素	
$("tr:odd")	// 选取奇数位置的 <tr> 元素

常用的 jQuery 事件方法

• click()

$("p").click(function(){
  $(this).hide();
});

• dblclick()

$("p").dblclick(function(){
  $(this).hide();
});

• mouseenter()

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

• mouseleave()

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

• mousedown()

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

• mouseup()

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

• hover()

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

• focus()

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

• blur()

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

jQuery 效果

• 隐藏和显示

// hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

//  toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
  $("p").toggle();
});

// fadeIn() 用于淡入已隐藏的元素。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

// fadeOut() 方法用于淡出可见元素。
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
// 其他内容，详见此连接[]https://www.runoob.com/jquery/jquery-slide.html]

获取内容和属性

• 获得内容 - text()、html() 以及 val()

//text() - 设置或返回所选元素的文本内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

//html() - 设置或返回所选元素的内容（包括 HTML 标记）
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

//val() - 设置或返回表单字段的值
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

// attr() 方法用于获取属性值。
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

添加元素

• append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。

$("p").append("追加文本");

• prepend() 方法在被选元素的开头插入内容。

$("p").prepend("在开头追加文本");

删除元素

• remove() 方法删除被选元素及其子元素。

$("#div1").remove();

• empty() 方法删除被选元素的子元素。

$("#div1").empty();