jQuery基础复习回忆

jQuery

基础

CDN引用jQuery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

您是否很疑惑为什么我们没有在 标签中使用 type=”text/javascript” ？

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

在文档加载后执行js

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

这就等价于：

$(function(){
    // 执行代码
});

同时等价于js中的：

window.onload = function () {
    // 执行代码
}

选择器

$(“ ”)就是取值。

具体用法:

元素 元素

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

事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click (点击)	keypress （按了字符）	submit	load
dblclick （双击）	keydown （按下）	change	resize
mouseenter （指针穿过）	keyup （按下后离开）	focus （获得焦点）	scroll
mouseleave （指针离开）		blur （失去焦点）	unload
hover （光标悬停）

简单动画实例和函数

显示和隐藏

这是显示和隐藏的函数：

//隐藏
$(selector).hide(speed,callback);
//显示
$(selector).show(speed,callback);
//隐藏和显示切换
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实例

$(function(){
  $(".hidebtn").click(function(){
    $("div").toggle(1000,"linear",function(){
      alert("方法已完成!");
    });
  });
});

PS:

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数

淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

• fadeIn(speed,callback) 淡入，显示不可见元素
• fadeOut(speed,callback) 淡出，隐藏可见的元素
• fadeToggle(speed,callback) 切换两个状态
• fadeTo(speed,opacity,callback) 渐变为指定的透明度（0–1之间）

使用方法同隐藏显示。

滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

• slideDown()
• slideUp()
• slideToggle()

使用方法及参数同上，speed和callback

动画

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

大概就是这样，这里比较复杂先跳过

jQuery链

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

jQuery中可以这样写，一个函数接着一个函数，这个就叫jQuery链接进制。

HTML

获得（查）

获得内容 - text()、html()、val()

获得内容的三个函数： text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 所选元素的文本内容
• html() - 所选元素的内容（包括 HTML 标记）
• val() - 表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

实例 1：

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

这个例子里<a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 **** 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

这个例子里 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

设置（改）

设置内容

直接设置元素的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

设置属性

attr()同样适用

直接设置属性的值：

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

回调函数设置属性的值：

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

增加（增）

添加新的元素

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

prepend()方法和append()方法：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

after()方法和before()方法：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

删除

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

//移除div1，啥都不剩
$("#div1").remove();
//移除div1中的东西，剩下<div1></div1>
$("#div1").empty();

可以过滤进行删除：

//移除所有class="italic" 的 p 元素。
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});

操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

css() 方法设置或返回被选元素的一个或多个样式属性。

数据校验

引入：

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

加载完成后调用：

$().ready(function () {
    validateRule();
});
$.validator.setDefaults({
    submitHandler: function () {
        save();
    }
});

编写校验规则：

//数据校验规则
function validateRule() {
    //alert('成功3！');
    $("#staffInfoAddForm").validate({
        rules: {
            name: {
                required: true
            },
            tel:{
                required:true
            },
            username:{
                required:true
            },
            password:{
                required:true,
                minlength:5
            },
            passwordagain:{
                required:true,
                minlength:5,
                equalTo:"#password"
            },
            intime:{
                required:true
            }
        },
        messages: {
            name: {
                required: icon + "请输入姓名"
            },
            tel: {
                required: icon + "请输入联系方式"
            },
            username: {
                required: icon + "请输入用户账号"
            },
            password: {
                required: icon + "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
            },
            passwordagain: {
                required: icon + "请再次输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
            },
            intime: {
                required: icon + "请输入入职日期"
            }
        }
    });
}

常见的校验规则：

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:”check.php”	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:”#field”	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

演示Demo