CreateTime--2017年7月17日11:45:27
Author:Marydon

jQuery特性

1.jQuery取值

  使用jQuery进行页面取值时,获取到的值的类型有两种:string、undefined。

  说明:如果页面上不存在该元素,不会报错,返回的是:undefined

2.jQuery赋值

  使用jQuery进行页面赋值时,如果值为undefined,则该行页面赋值方法虽然运行了,但是没有执行任何操作。

3.jQuery执行事件

   使用jQuery给页面上不存在的元素执行事件,不会报错,该行代码不会执行任何操作

举例:

  HTML部分

<input id="test" type="text"/>
<div id="test2" style="border:1px solid red;height: 20px;"></div>

  JAVASCRIPT部分

window.onload = function () {
// 例1.给id="test"的文本框赋值未定义
$('#test').val(undefined);
// 例2.给id="test2"的div添加内容:不存在的页面元素test3的值
$('#test2').html($('#test3').val());
// 例3.给页面上不存在的元素执行点击事件
$('#bcDiv table:eq(0)').click();
}

  说明:

    这三项的好处在于:

    a.如果不存在不会报错,而使用js就会报错;

    b.对页面进行赋值时,不会将undefined赋值到页面上,而是不执行任何操作(不会修改原文),而js会将undefined当作字符串输出到页面上。

UpdateTime--2017年8月24日17:55:48

4.操作CSS样式

<a href="www.baidu.com" id="ceshi">去除下划线</a> 

  4.1 操作单个CSS样式

$('#ceshi').css('text-decoration','none');  

  4.2 操作多个CSS样式

$('#ceshi').css({'text-decoration':'none','color':'#f57e42'}); 

注意:

  a.jQuery操作一个CSS样式,格式:css('样式名','样式值');

  样式名和样式值之间使用逗号隔开。

  b.jQuery操作多个(>=2)CSS样式,格式:css({'样式名':'样式值','样式名':'样式值',...});  

  样式名和样式值之间使用冒号隔开,多个样式之间使用逗号隔开,最外面使用大括号包住,即里面是一个标准的JSON对象。

  c.对于CSS样式的名称,中间不带有-的可以不加单引号;用-隔开的样式名,必须使用单引号括住。

UpdateTime--2017年8月25日08:11:07

5.绑定事件

  仍以上面的a标签为例

  5.1 绑定单个事件

  添加鼠标悬浮事件实现方式汇总:

  方式一:推荐使用

$(function(){
$('#ceshi').mouseover(function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
});
}); 

  方式二:使用on事件

$(function(){
$('#ceshi').on('mouseover',function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
});
});

  方式三:使用bind事件

$(function(){
$('#ceshi').bind('mouseover',function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
});
}); 

  5.2 绑定多个事件

  添加鼠标悬浮事件和鼠标移除事件实现方式汇总:

  方式一:推荐使用

$(function(){
$('#ceshi').mouseover(function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
}).mouseout(function(){
$(this).css('color','#000');//color必须加单引号,否则报错
});
});

  方式二:使用on事件

$(function(){
$('#ceshi').on({'mouseover':function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
},
'mouseout':function(){
$(this).css('color','#000');
}
});
}); 

  方式三:使用bind事件

$(function(){
$('#ceshi').bind({'mouseover':function(){
$(this).css({'text-decoration':'none',color:'#FFF'});
},
'mouseout':function(){
$(this).css('color','#000');
}
});
}); 

注意:

  a.以on事件为例,jQuery其实就是javascript的on去掉而已;

  b.方式一:单个事件直接添加".事件(function(){})",多个事件在其后继续添加".事件(function(){})";

  c.方式二:单个事件格式:on('事件名',function(){}),多个事件格式:on({'事件名':function(){},'事件名':function(){},...});

   最外面使用{}包起来,事件名使用单引号括起来,事件名与匿名函数之间使用冒号,多个事件之间使用逗号隔开,即也是一个类似标准的JSON对象。 

6.执行多个jQuery代码

var newTable = $('#' + tableName).clone().attr('id', '').show().appendTo("#" + divName);

解说: 获取id=tableName的标签并对其进行克隆,设置克隆后的table兑现的id属性值为空,并让其显示出来,拼接到id=divName的div标签的最底部

UpdateTime--2017年9月4日17:12:40

7.获取子节点、子孙节点

// 获取的是子节点
var aa = $('#file_upload-queue').children('div').length;
// 获取的是子孙节点
aa = $('#file_upload-queue div').length;

8.通过class样式选取页面元素

  8.1 class样式只作用在一个元素上

  说明:获取到的有且只有一个jquery元素

  测试:

<div class="test">class样式只作用在一个元素上</div>
alert($('.test').html());

  8.2 class样式作用在多个元素上

  说明:获取到的多个jquery对象组成的数组

<div class="test">class样式作用在多个元素上 </div><div class="test">测试jquery通过class获取页面元素</div>
var array = $('.test');
for(var i=0;i<array.length;i++) {
alert($(array[i]).html());
}

  说明:通过class样式选取页面元素可以实现批量修改css样式

  举例:

<div class="test">class样式作用在多个元素上 </div><div class="test">测试jquery通过class获取页面元素</div> 
$('.test').css({height:'100px',width:'500px',border:'1px solid red'}); 

  效果:页面上所有class="test"的元素,都会起作用

UpdateTime--2017年11月6日17:24:32

9. jquery通过标签获取页面元素

  当页面上使用唯一一个标签时,获取到的有且只有一个jquery元素

  举例:$('body')

 

jQuery特性的更多相关文章

  1. 深入学习jQuery特性操作

    × 目录 [1]获取特性 [2]设置特性 [3]删除特性 前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttrib ...

  2. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  3. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  4. jquery,html5,css3主要特性总结

    jquery特性: 1.丰富简单的DOM选择器 2.同一函数实现get和set 3.支持链式方法书写 4.完善的事件处理功能 5.强大的css动画效果 6.完善的Ajax 7.简单的元素样式操作 8. ...

  5. JS基础(四)之jQuery

    31.jQuery(http://jquery.com/)是一个快速.简洁的JavaScript框架. 它封装了JavaScript常用的功能代码,提供一种便捷的JavaScript设计模式,优化HT ...

  6. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  7. 关于前端jquery的总结

    简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以代替传统DOM编程的操作方式和操作风格,通过对DOM  API.DOM事件的封装,提供了一套全新的API,这套全新 ...

  8. 4_jquery

    官网:www.jquery.com 兼容: 1.jquery-3.1.0.js :form.attr("checked","false")无效 2.firefo ...

  9. ASP.NET MVC5高级编程 之 Ajax

    jQuery不仅支持所有现代浏览器,包括IE.Firefox.Safari.Opera和Chrome等,还可以在编写代码和浏览器API冲突时隐藏不一致性(和错误). 1. jQuery jQuery擅 ...

随机推荐

  1. bzoj 4094: [Usaco2013 Dec]Optimal Milking

    4094: [Usaco2013 Dec]Optimal Milking Description Farmer John最近购买了N(1 <= N <= 40000)台挤奶机,编号为1 . ...

  2. 精通android体系架构、mvc、常见的设计模式、控制反转(ioc)

    1.请看某个著名的it公司一则招聘信息的其中一条要求:“熟悉android系统架构及相关技术,1年以上实际android平台开发经验:”,里面非常明确的说道要求熟练android系统架构,这从某种程度 ...

  3. [BZOJ5028]小Z的加油店

    [BZOJ5028]小Z的加油店 题目大意: 一个长度为\(n(n\le10^5)\)的数列,\(m(m\le10^5)\)次操作,支持区间加和区间\(\gcd\). 思路: 线段树维护差分,\(\g ...

  4. hdu 3507 斜率优化

    我的第一道斜率优化. 就这道题而言,写出原始的方程: dp[i] = min{ dp[j] + (sum[i]-sum[j])2  + M | j in [0,i) } O(n^2)的复杂度肯定超时, ...

  5. bzoj 3437: 小P的牧场 -- 斜率优化

    3437: 小P的牧场 Time Limit: 10 Sec  Memory Limit: 128 MB Description 小P在MC里有n个牧场,自西向东呈一字形排列(自西向东用1…n编号), ...

  6. leetcode132. Palindrome Partitioning II

    leetcode132. Palindrome Partitioning II 题意: 给定一个字符串s,分区使分区的每个子字符串都是回文. 返回对于s的回文分割所需的最小削减. 例如,给定s =&q ...

  7. Linux知识(2)----中文输入法安装

    Ubantu14.04在English的环境下,没有中文输入法,自带的ibus不完整.现在基于ibus框架,有几个比较好用的输入法,如sunpingyin和google pinying,还有五笔的输入 ...

  8. IDA IDC Tutorials: Additional Auto-Commenting

    https://www.hex-rays.com/products/ida/support/tutorials/idc/autocomment.shtml This program creates a ...

  9. Digital Current-Mode Control Challenges Analog Counterparts

    http://electronicdesign.com/digital-ics/digital-current-mode-control-challenges-analog-counterparts ...

  10. “花生壳” + “VisualSVN” 巧妙实现远程代码版本号控制

    近期因为项目须要,要远程訪问svnserver,可是没有固定域名和ip,因此就打算用花生壳申请一个免费的域名构建一个server,再把VisualSVN部署在server上,就能够在外网訪问了(假设你 ...