1jQuery简介

1 jQuery简介

前言：目前正在学习JQuery，查阅了一下课外书籍和视频，总结了这一块的知识点，听身边的技术大神说这一块挺重要的，个人感觉里边的内容挺多的，做个归纳供大家分享。

---

1.1jQuery简介

1.1.1什么是jQuery?

　　 JQuery，顾名思义，也就是JavaScript和查询（Query），是一个轻量的，免费开源的JS函数库，能够极大的简化JS代码

1.1.2jQuery的优势

(1)可以极大简化JS代码
(2)可以像CSS那样来获取页面 元素
(3)可以操作CSS属性来控制页面的效果
(4)可以兼容常用的浏览器

1.1.3jQuery的版本支持

1.x – 支持常用浏览器, 以及IE6+以上的版本
2.x – 支持常用浏览器, 以及IE9+以上的版本
3.x – 支持常用浏览器, 以及IE9+以上的版本
　　jQuery的缺点：jQuery的高版本不兼容低版本。这是因为jQuery在升级除了会做一些内部优化之外，还会增加或删除一些方法。如果升级到高版本，可能会造成之前的部分代码无法执行！　

---

3.3内容选择器

1.1.4jQuery引入

　　1.jQuery函数库本身是一个js文件, 所以引入jQuery和引入一个普通的JS文件一样
　　
　　2.FAQ常见问题：在引入的过程中，经常会出现文件引入失败的错误:
　　
　　

文件引入失败是往往是由于jQuery库文件的路径错误导致的!!

---

2 jQuery语法

2.1$符号介绍

$符号等价于jQuery, 参见jQuery源码:

　　调用$()等价于调用jQuery()，该函数会返回一个jQuery对象，该对象包含了若干个html元素，可以调用jQuery中提供的方法或属性来操作这些元素.

$(“div”).css(“background-color”, “red”) – 为所有的div设置背景颜色为red

2.2文档就绪事件

　　这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，如果在文档没有完全加载之前就运行函数，操作可能失败。
　　在jQuery中提供了一个文档就绪事件函数：
　　

$(document).ready(function(){
    //在整个html文档加载完成之后立即触发执行…
});

等价于window.onload事件：在整个html文档加载完成之后立即触发

其简写形式为:(推荐!)
$(function(){
    //在文档加载完之后立即触发执行…
});

---

2.3jQuery对象和JS对象的相互转换

2.3.1为什么需要相互转换

　　jQuery是js的简单框架, 在使用时通过$()可以返回一个jQuery对象, 可以通过jQuery提供的属性或方法来操作其中的内容,
但是, 不可以通过jQuery对象来调用js的属性或者js的方法. 反之,
也不可以通过JS对象来调用jQuery的属性或者jQuery方法, 否则调用会报错!!

2.3.2JS对象转成jQuery对象

2.3.3jQuery对象转成JS对象

---

3 jQuery选择器(重点)

3.1基本选择器

1、元素名(标签名)选择器：根据元素的名称选中指定名称的元素
格式：$(“元素名称”)

2、类选择器：根据元素的class属性, 匹配所有class值相同的元素
格式：$(“.class值”)

3.ID选择器：根据元素的id属性值, 匹配具有特定id的元素
格式：$(“#id值”)

4.多元素选择器：匹配多个选择器选中的元素
格式：$(“选择器1,选择器2,…选择器n”)

1. contains
$(“div:contains(‘xxx’)”) – 匹配所有div中包含xxx文本的div元素
2.empty
$(“div:empty”) – 匹配所有div中内容为空的div元素
3.has
$(“div:has(span)”) – 匹配所有div中包含span子元素的div元素
4.parent
$(“div:parent”) – 匹配所有div中内容不为空的div元素

3.4可见选择器

1.hidden
$("div.hidden")-匹配所有掩藏的div元素
2.visible
$("div:visible")-匹配所有可见的div元素

3.5属性选择器

1.$("div[id]") -匹配所有具有id属性的div元素
2.$("div[id='d1']")-匹配具有id属性并且值为d1的div元素
3.$("div[id!='d1']") - 匹配具有id属性并且值不等d1的div元素
4.$("div[id]^='d1'")- 匹配具有id属性并且值是以d1开头的div元素
5.$("div[id$='d1']") - 匹配具有id属性并且值是以d1结尾的div元素

3.6子元素选择器

3.8表单选择器

1.$(":input")---匹配所有的表单项元素(包括input，select，textarea等)
2.$(":password")---匹配所有的密码输入框
3.$(":radio")---匹配所有的单选框
4.$(“:radio”) – 匹配所有的单选框
5.$(“:checkbox”) – 匹配所有的复选框
6.$(“:checked”) – 匹配所有被选中的单选框, 复选框, option选项

---

4 文档操作

4.1html元素的增删改查

　1.创建新元素

$(“<div></div>”) – 创建一个div元素
$(“<div>hello…</div>”) – 创建一个包含文本内容的div元素
$(“<div><span></span></div>”) – 创建一个包含span子元素的div元素

　2.添加子元素

$(“div”).append($span); -- 为div添加一个span子元素
$("#div").append(子元素);

　3.删除元素本身

$(“div”).remove(); -- 删除匹配的所有div元素

　4.替换元素

$(“div”).replaceWith($span) – 将匹配的所有div元素替换为span元素

4.2html属性/值操作

　1.html() – 获取或设置元素的html内容

$(“div”).html() – 获取所匹配元素中的第一个元素的html内容
$(“div”).html(“<span>xxx</span>”) – 为所有匹配的div元素设置html内容

　2.text() – 获取或设置元素的文本内容

$(“div”).text() – 获取所匹配元素的所有文本内容
$(“div”).text(“xxx”) – 为所有匹配的div元素设置文本内容

　3.attr() – 获取或设置元素的属性

$(“div”).attr(“id”) – 获取所匹配元素中的第一个元素的id属性值
$(“div”).attr(“id”, “div1”) – 为所匹配的div元素设置id属性值

4.3操作CSS样式

　1.css()函数　

$(“div”).css(“background-color”) – 获取所匹配的div元素中的第一个div元素的背景颜色
$(“div”).css(“background-color”, “red”) – 为所匹配的div元素设置背景颜色

4.4效果

　　1.hide() — 设置所有匹配的元素的为隐藏
　　2.show() – 设置所有匹配的元素为显示
　　3.toggle() – 切换元素的显示状态, 如果显示则切换为隐藏, 如果是隐藏则切换为显示.
　

---

5事件

5.1常用事件介绍

　　在JS中，通过元素的onclick属性可以为元素绑定点击事件，例如：
　　

---

6 模拟员工信息管理系统

浏览器预览如下：

需要补充的代码功能：

6.3.1添加新员工

4.3操作CSS样式

function addEmp(){
    //1.获取添加员工的信息
    var id = $("#box1 input[name='id']").val().trim();
    var name = $("#box1 input[name='name']").val().trim();
    var email = $("#box1 input[name='email']").val().trim();
    var salary = $("#box1 input[name='salary']").val().trim();
    //alert(id+" : "+name+" : "+email+" : "+salary);

    //2.校验数据
    //>>员工信息不能为空
    if(id == "" || name == "" || email == ""|| salary == ""){
        alert("员工信息不能为空!");
        return;
    }
    //>>自己完成: 检测邮箱格式是否正确

    //>>自己完成: 检测工资格式是否正确( 必须是数值 )

    //>>员工的ID不能重复
    /* 获取所有的id遍历, 拿着用户输入的id依次进行对比, 如果相等, 就提示id已存在, 结束方法! */
    //获取每一行的第二个td元素
    var isExist = false;//假设id是不存在的!
    $("table tr td:nth-child(2)").each(function(){
        if( id == $(this).text() ){
            alert("您输入的id已存在!");
            isExist = true;//id存在!
        }
    });
    if(isExist){//如果id已存在, 则结束方法执行!
        return;
    }

    //3.将员工信息添加到表格中
    var $td1 = $("<td><input type='checkbox'/></td>");
    var $td2 = $("<td>"+id+"</td>");
    var $td3 = $("<td>"+name+"</td>");
    var $td4 = $("<td>"+email+"</td>");
    var $td5 = $("<td>"+salary+"</td>");
    var $tr = $("<tr></tr>");
    //>>将td元素添加到tr中
    $tr.append($td1).append($td2).append($td3).append($td4).append($td5);
    //>>将tr添加到table中
    $("table").append($tr);
}

6.3.2修改员工信息

function updEmp(){
    //1.获取修改后的员工信息
    var id = $("#box2 input[name='id']").val().trim();
    var name = $("#box2 input[name='name']").val().trim();
    var email = $("#box2 input[name='email']").val().trim();
    var salary = $("#box2 input[name='salary']").val().trim();
    //2.校验数据
    //>>修改后员工信息不能为空
    if(id == "" || name == "" || email == "" || salary == ""){
        alert("员工信息不能为空!");
        return;
    }

    //3.根据员工的id修改员工信息
    var isExist = false;//假设id不存在!
    $("table tr td:nth-child(2)").each(function(){
        if( id == $(this).text() ){//如果id存在则修改员工信息
            $(this).next().html( name );
            $(this).next().next().html( email );
            $(this).next().next().next().html( salary );
            isExist = true;
        }
    });
    if(!isExist){//如果id不存在
        alert("您输入的id不存在!");
    }
}

6.3.3删除员工信息

function delEmp(){
    //1.获取所有被选中的行(tr)
    //方式一:
    //$("input:checked").parent("td").parent("tr").remove();

    //方式二:
    //$("td input:checked").parents("tr").remove();

    //方式三:
    $("input:checked").each(function(){
        //如果当前复选框的id值不为all, 则删除当前行
        if( $(this).attr("id") != "all" ){
            $(this).parents("tr").remove();
        }
    });
}

6.3.4设置全选或全不选

function checkAll(thisobj){
    //1.获取全选复选框的选中状态值
    //<input type="checkbox" checked="checked">
    var isCK = $("#all").attr("checked");
    alert( isCK );
    //2.将选中状态值设置给下面所有的复选框
    $(":checkbox").attr("checked", isCK);
}