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 字符串 ] 时： $("12");

 

$( “12123” );

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

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

spanObj.innerHTML = “12123”; //12123

 

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表格学习

  

    
Month
    
Savings
  
  

    
January
    
$100
  

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

 

动态添加、删除表格记录

 

Name	Email	Salary
Tom	[email protected]	5000	Delete
Jerry	[email protected]	8000	Delete
Bob	[email protected]	10000	Delete

添加新员工

name:
email:
salary:
Submit

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 );

转载于:https://www.cnblogs.com/limingxian537423/p/6972676.html