JQuery学习

一、JQuery 介绍：

什么是JQuery ?

jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。

JQuery核心思想！！！

它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

 

JQuery流行程度

    jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

JQuery好处！！！

jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

二、Jquery 核心函数  $()

$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数

1、传入参数为  [ 函数 ] 时：$(function(){})

      
       它的功能就是window.onload也就是页面加载完成之后。

$( function(){

在这个函数体内实现你要写的功能。

} );          

2、传入参数为  [ HTML 字符串 ] 时： $("<span>12</span>");

$( “<span>12123</span>” );

相当于原生的js中的以下代码

var spanObj = document.createElement(“span”); //创建一个标签对象    <span></span>

spanObj.innerHTML = “12123”; //<span>12123</span>

3、传入参数为  [ 选择器字符串 ] 时：$(“#id”)

4、传入参数为  [ DOM对象 ] 时：      $(dom)

注意获取数据和获取对象的定义区别：

获取的是数值所以不用$

 var name = $("#empName").val();

注意对比： $ var name = $("#empName");

三、 jQuery选择器

基本选择器（****重点）

#ID                    选择器：根据id查找标签对象 

.class       选择器：根据class查找标签对象

element 选择器：根据标签名查找标签对象

*               选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回

层级选择器（****重点）

ancestor descendant       后代选择器     ：在给定的祖先元素下匹配所有的后代元素

parent > child                  子元素选择器：在给定的父元素下匹配所有的子元素

prev + next                        相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素

prev ~ sibings                    之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

过滤选择器（具体看手册）

过滤选择器一般前面会带冒号“：”

:first                                               获取第一个元素

:last                                      获取最后个元素

:not(selector)                     去除所有与给定选择器匹配的元素

:even                                    匹配所有索引值为偶数的元素，从 0 开始计数

:odd                                      匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index)                           匹配一个给定索引值的元素

:gt(index)                             匹配所有大于给定索引值的元素

:lt(index)                              匹配所有小于给定索引值的元素

:header                                匹配如 h1, h2, h3之类的标题元素

:animated                           匹配所有正在执行动画效果的元素

。。。。。。

四、JQuery 元素筛选

eq()                    获取指定索引的元素     功能相当于:eq()             

first()                  获取第一个元素              功能相当于:first

last()                  获取最后一个元素         功能相当于:last

filter(exp)        留下匹配给定exp选择器的元素         

is()                      判断jquery对象中是否匹配给定的表达式，其中只要有一个匹配，就返回true

has(exp)            保留后面中有匹配给定exp选择器的元素的元素     功能跟:has();相同

not(exp)            去掉，或者删除掉那些匹配exp选择器的元素。 功能跟:not()相同

children(exp)    从子元素中匹配给定的exp子元素               parent>child

find()                  查找后代元素                                               ancestor descendant后代选择器

next()                 查找当前元素的下一个兄弟元素        

nextAll()            查找当前元素后面的所有兄弟元素             

nextUntil(selector)          查找当前元素后面的所有兄弟元素，到给定的selector选择器为止

parent()                     返回jquery对象的父元素

prev(exp)                   查找当前元素的前面一个紧连的兄弟元素

prevAll()                     查找当前元素的前面所有兄弟元素    

prevUnit(exp)           查找当前元素前面的所有兄弟元素。直到匹配exp选择器为止

siblings(exp)              查找当前元素所有兄弟元素

add()                            把后面选择器匹配到的结果添加到jquery对象中

五、JQUery 的属性操作（****重点）

html()                 功能相当于innerHTML可以设置获取起始标签和结束标签中的内容 (包含标签)        

text()                  功能相当于innerText ，可能获取起始标签和结束标签中的文本

val()                    val方法主要是操作form表单中的标签项的value属性。

    $(function() {
        $("a.deleteItemClass").click(function() {
            var name = $(this).parent().parent().find("td:first").html();
            return confirm("你确认要删除商品【"+ name+"】吗？");
        });
    });

  var name = $(this).parent().parent().find("td:first").html();
获取a标签class为deleteItemClass的标签后，向上查找两个父节点【parent（）JQuery 元素筛选】【find() 查找后代元素 】，

find("td:first")---：first为过滤器，获取td标签的第一个元素，
html()----获取该标签间的内容

attr()         attr可以获取属性值，也可以设置属性值。

prop()       prop同样可以获取属性值，和设置属性值。prop推荐操作那些值。true和false的属性

attr可以操作所有的属性。但是像那些checked。selected，disabled这些属性推荐使用porp设置和获取因为prop得到的结果会更佳的友好。

attr可以给标签添加一些非标准的属性。就可以在html页面端保存一些临时的数据。

var id = $("input").attr("data");

HTML表格学习

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table> 标签定义 HTML 表格。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function() {
         //1.添加记录
        
        //第一步，先给submit按钮绑定单击事件
        $("#addEmpButton").click(function() {
            //第二步获取三个文本框name、email、salary的输入信息
         var name = $("#empName").val();
         var email = $("#email").val();
         var salary = $("#salary").val();
            //第三步，创建一个tr标签对象，然后把name和email和。salary添加到td里
         var $trObj = $("<tr><td>"
                 +name+"</td><td>"
                 +email+"</td><td>"
                 +salary+"</td><td><a href='deleteEmp?id=001'>Delete</a></td></tr>");
            //第四步，把创建好的tr标签对象，追加到table中
         $("#employeeTable").append($trObj);
            
        //2、删除记录
             //1.从新创建的tr标签中，查找出a标签。给它绑定单击事件
             $trObj.find("a").click( aDeleteFun ); 
        }); 
        
        //2.做删除的操作
        var aDeleteFun = function(){
            //3.通过点击的a标签找到所在行
            var $trObj = $(this).parent().parent();
            //当我们需要删除数据之前，我们应该给用户一些友好的提示
//             confirm这是js中的确认框
//             这个函数接收的参数是提示框提示的文本内容
//            当用户点击确定就返回true,当用户点击取消，就返回false

            // 从tr标签对象中，获取第一个td标签对象，然后从中获取到删除行的name的值
            var name1 = $trObj.find("td").first().html();
            var result = confirm("你确定删除"+name1+"一行吗");
            if (result) {
                //4.调用remove();
                $trObj.remove();
            }
            //如何取消a标签的跳转
            //在单击事件中，直接return false.可以阻止元素的默认行为
            return false;
        };
        $("a").click( aDeleteFun );
    });
    
    
</script>
</head>
<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
    
        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>

    </div>

</body>
</html>

parent() find(） 

 调用函数，必须定义在前，调用在后。

$("a").click( aDeleteFun );

//2.做删除的操作
var aDeleteFun = function(){
//3.通过点击的a标签找到所在行
var $trObj = $(this).parent().parent();
//当我们需要删除数据之前，我们应该给用户一些友好的提示
// confirm这是js中的确认框
// 这个函数接收的参数是提示框提示的文本内容
// 当用户点击确定就返回true,当用户点击取消，就返回false

// 从tr标签对象中，获取第一个td标签对象，然后从中获取到删除行的name的值
var name1 = $trObj.find("td").first().html();
alert(name1);
var result = confirm("你确定删除一行吗");
if (result) {
//4.调用remove();
$trObj.remove();
}
//如何取消a标签的跳转
//在单击事件中，直接return false.可以阻止元素的默认行为
return false;
};
$("a").click( aDeleteFun );