JQUERY简单介绍

一.Jquery选择器

1.元素选择器
jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:
$(“p”)

2.id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
$("#test")

3.class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
$(".test")

二.jquery事件

使用示例:
设置P元素的click事件
$(“p”).click(function(){
$(this).hide();
});
click:click() 方法是当按钮点击事件被触发时会调用一个函数。
dbclick():当双击元素时，会发生 dblclick 事件。
mouseenter():当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave():当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup():当在元素上松开鼠标按钮时，会发生 mouseup 事件。

三.Jquery效果

1.隐藏 显示
$("#hide").click(function(){
$(“p”).hide();
}); 使用后p元素隐藏

$(selector).hide(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2.淡入淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeOut() 方法用于淡出可见元素
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

3.滑动
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

4.链
有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$("#p1").css(“color”,“red”)
.slideUp(2000)
.slideDown(2000);

四.Jquery HTML

1.捕获
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
jQuery attr() 方法用于获取属性值

$("#btn1").click(function(){
alert(“Text: " + $(”#test").text());
});
$("#btn2").click(function(){
alert(“HTML: " + $(”#test").html());
});
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ alert(("#runoob").attr(“href”));
});

2.设置（改变）内容
通过 text()、html() 以及 val() 方法来设置内容：
$("#btn1").click(function(){
$("#test1").text(“Hello world!”);
});
$("#btn2").click(function(){
$("#test2").html(“Hello world!”);
});
$("#btn3").click(function(){
$("#test3").val(“RUNOOB”);
});
jQuery attr() 方法也用于设置/改变属性值。
$(“button”).click(function(){
$("#runoob").attr(“href”,“http://www.runoob.com/jquery”);
});

3.添加元素
通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
function appendText(){
var txt1=“

文本-1。

”; // 使用 HTML 标签创建文本
var txt2=$("

").text(“文本-2。”); // 使用 jQuery 创建文本
var txt3=document.createElement(“p”);
txt3.innerHTML=“文本-3。”; // 使用 DOM 创建文本 text with DOM
$(“body”).append(txt1,txt2,txt3); // 追加新元素
}

通过 after() 和 before() 方法添加若干新元素
function afterText()
{
var txt1=“I “; // 使用 HTML 创建元素
var txt2=$(””).text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement(“big”); // 使用 DOM 创建元素
txt3.innerHTML=“jQuery!”;
$(“img”).after(txt1,txt2,txt3); // 在图片后添加文本
//（对 before() 同样有效）
}

4.删除元素
remove() 方法删除被选元素及其子元素。("#div1").remove();
jQuery empty() 方法删除被选元素的子元素。("#div1").empty();

五.jquery后代

1.jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
$(document).ready(function(){
$(“div”).children();
});

2.jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(document).ready(function(){
$(“div”).find(“span”);
});