JQuery常用

通过 CDN（内容分发网络） 引用jquery库

https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js 一般用这个

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js

Jquery常用方法

1.动画效果

$("#id").hide("slow", callback); //隐藏

$("#id").show(); //显示

$("#id").toggle(); //显示或隐藏

$("#id").fadeIn(); //渐入

$("#id").fadeOut(); //渐隐

$("#id").fadeToggle(); //渐入或渐隐

$("#id").fadeTo(speed, opacity) //以一定的速度 渐变到某个透明度

$("#id").slideDown(); //向下滑动

$("#id").slideUp();//向上滑动

$("#id").slideToggle();//向上滑动 或 向下滑动

$("#id").animate({

left: '250px',

opacity: '0.5'

}); //操作css属性 实现动画 同一个dom上的多个animate会形成队列 逐一调用

$("#id").stop();//停止动画

$("#id").css("color", "red").slideUp(2000).slideDown(2000); //动作链接

2.元素值的获取 设置 更改

$("#id").text() //返回元素的文本内容

$("#id").html() //返回元素的html内容

$("#id").val() //返回表单字段的值 input

$("#id").text("设置元素的文本内容") //设置元素的文本内容

$("#id").html("<b>设置元素的html内容</b>") //设置元素的html内容

$("#id").val("设置表单字段的值") //设置表单字段的值 input

$("#id").append("")//在元素后插入内容

$("#id").prepend("")//在元素后插入内容

function creatText() {

var txt1 = "<p>文本1</p>";//使用html创建文本

var txt2 = $("<p></p>").text("文本2"); //使用jquery创建文本

var txt3 = ducument.creatElement("p");

txt3.innerHTML = "文本3";//使用dom创建文本

$("body").append(text1, txt2, txt3);//在body中追加新元素

}

$("#id").remove();//删除元素

$("#id").empty();//删除元素的子元素

$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素

$("#id").addClass("");//为元素添加类

$("#id").removeClass("");//为元素删除类

$("#id").toggleClass("");//为元素删除或添加类

$("#id").css("background-color");//返回元素的"background-color"值

$("#id").css("background-color", "yellow");//设置元素的"background-color"值

$("p").css({ "background-color": "yellow", "font-size": "200%" });//设置元素的多个css属性

3.尺寸

$("p").width(); //element宽度

$("p").innerWidth(); //element + padding

$("p").outerWidth();//element + padding + border

$("p").outerWidth(true);//element + padding + border + margin

4.遍历

$("p").parent();//返回p元素的直接父元素

$("p").parents();//返回p元素的所有父元素

$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素

$("div").children();//返回每个 <div> 元素的所有直接子元素

$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素

$("h2").siblings();//返回h2的所有同胞元素

$("h2").next();//返回 <h2> 的下一个同胞元素

$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素

$("div p").last();//选取首个 <div> 元素内部的最后一个 <p> 元素

$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素

$("p").not(".url");//返回所以不带有类名 "url" 的所有 <p> 元素

5.jquery与服务器交换数据

AJAX 和jquery配合 在不重载整个页面的情况下 实现对部分网页的刷新

$("#div1").load("demo_test.txt", function (responseTxt, statusTxt, xhr) {

if (statusTxt == "success")

//外部内容加载成功!

if (statusTxt == "error")

console.log("Error: " + xhr.status + ": " + xhr.statusText);

});//把demo_test文件的内容加载到指定的 <div> 元素中

//为了避免多页面情形下的代码重复，可以利用 load() 方法，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入

//使用 $.get() 方法从服务器上的一个文件中取回数据

$.get("demo_test.php", function (data, status) {

alert("数据: " + data + "\n状态: " + status);

});

//使用 $.post() 方法请求向服务器提交数据。

$.post("demo_test_post.php", { name: "" }, function (data, status) {

alert("数据: \n" + data + "\n状态: " + status);

});

//$是默认的jquery简写

var jq = $.noConflict();//可以自定义jquery简写

jQuery Validate 插件为表单提供了强大的验证功能

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js">