jQuery

        jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
       jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
       简言之,jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程。
 

一、选择器

(1)id选择器

定义和用法

# 选取带有唯一的指定 id 的元素。

id 引用 HTML 元素的 id 属性。

相同的 id 值只能在文档中使用一次。

语法
$('#id')
实例
选取 id="choose" 的 元素:
$('#choose')

注释:不要使用数字开头的 ID 名称!在某些浏览器中可能出问题。

(2)class选择器

定义和用法. 选择器选取带有指定 class 的元素。
class 引用 HTML 元素的 class 属性。
与 id 选择器不同,class 选择器常用于多个元素。
这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式。
语法
$('.class')
实例
选取 class="intro" 的元素:
$('.intro')
注释:
.class.class  
$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
 

(3)标签选择器

定义和用法
element 选择器选取带有指定标签名的元素。
标签名引用 HTML 标签的 < 与 > 之间的文本。
语法
$(tagname)
实例
选择所有的 <p> 元素:
$('p')

(4)属性选择器

定义和用法
[attribute] 选择每个带有指定属性的元素。
可以选取带有任何属性的元素(对于指定的属性没有限制)。
语法
$("[attribute]")
实例
$("[name]")
$("[name]").addClass('ba');
$("[ceshi='123']");   --找出属性名称ceshi等于123的标签

(5)其他

二、筛选

三、属性操作方法

下面列出的这些方法获得或设置元素的 DOM 属性。

 

四、文档操作方法

实例
检查第一个 <p> 元素是否包含 "intro" 类:
$("button").click(function(){
alert($("p:first").hasClass("intro"));
});

五、 CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

实例
设置 <p> 元素的颜色为红色:
$(".btn1").click(function(){
$("p").css("color","red");
});

定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
返回 CSS 属性值。
返回第一个匹配元素的 CSS 属性值。
注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。

$(selector).css(name) 参数 描述
name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。
实例
取得第一个段落的 color 样式属性的值:
$("p").css("color");

设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css(name,value)参数 描述
name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。
value 可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值,比如 "red"。
如果设置了空字符串值,则从元素中删除指定属性。

实例
将所有段落的颜色设为红色:
$("p").css("color","red");

使用函数来设置 CSS 属性
设置所有匹配的元素中样式属性的值。
此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value是原先的属性值。
$(selector).css(name,function(index,value))参数 描述
name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。
function(index,value) 规定返回 CSS 属性新值的函数。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受 CSS 属性的当前值。
实例 1
将所有段落的颜色设为红色:
$("button").click(function(){
$("p").css("color",function(){return "red";});
});
实例 2
逐渐增加 div 的宽度:
$("div").click(function() {
$(this).css(
"width", function(index, value) {return parseFloat(value) * 1.2;}
);
});

设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
参数 描述
{property:value} 必需。规定要设置为样式属性的“名称/值对”对象。
该参数可包含若干对 CSS 属性名称/值。

比如: {"color":"red","font-weight":"bold"}
实例:
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});

六、事件方法

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

绑定事件:
 方法一:
$('.item .title').click(function(){
// this,$(this)
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});    
 方法二:
 
$('.item .title').

bind

('click', function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
})
 方法三:
$(function(){
// 当文档树加载完毕后,自动执行
$('.item .title').click(function(){
// this,$(this)
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
});

推荐第三种方法。

实用例子:
左侧菜单:(查找上下级,属性操作)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'>
  5. <title>test16</title>
  6. <style>
  7. body{
  8. margin:0;
  9. }
  10. .menu{
  11. width:200px;
  12. height:800px;
  13. background-color:#dddddd;
  14. overflow:auto;
  15. }
  16. .ba{
  17. background-color: red;
  18. }
  19. .hide{
  20. display: none;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <divclass="menu">
  26. <divclass="item">
  27. <divclass="title ba"onclick="ShowMenu(this)">菜单一</div>
  28. <divclass="content">
  29. <p>第一章</p>
  30. <p>第二章</p>
  31. <p>第三章</p>
  32. <p>第四章</p>
  33. </div>
  34. </div>
  35. <divclass="item">
  36. <divclass="title ba"onclick="ShowMenu(this)">菜单二</div>
  37. <divclass="content hide">
  38. <p>第一章</p>
  39. <p>第二章</p>
  40. <p>第三章</p>
  41. <p>第四章</p>
  42. </div>
  43. </div>
  44. <divclass="item">
  45. <divclass="title ba"onclick="ShowMenu(this)">菜单三</div>
  46. <divclass="content hide">
  47. <p>第一章</p>
  48. <p>第二章</p>
  49. <p>第三章</p>
  50. <p>第四章</p>
  51. </div>
  52. </div>
  53. </div>
  54. <scriptsrc="jquery-1.12.4.js"></script>
  55. <script>
  56. functionShowMenu(ths){
  57. // console.log(ths); // Dom中的标签对象
  58. //$(ths) // Dom标签对象转换成jQuery标签对象(便利)
  59. //$(ths)[0] // jQuery标签对象转换成Dom标签对象
  60. $(ths).next().removeClass('hide');
  61. $(ths).parent().siblings().find('.content').addClass('hide');
  62. }
  63. </script>
  64. </body>
  65. </html>
全选取消反选(属性的选择和设置值):
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>test</title>
  6. <style>
  7. th{
  8. width:48px;
  9. }
  10. td{
  11. text-align: center;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <inputtype="button"value="全选"onclick="ChoseAll();">
  17. <inputtype="button"value="取消"onclick="CancelAll();">
  18. <inputtype="button"value="反选"onclick="ReverseAll();">
  19. <tableborder="1">
  20. <thead>
  21. <tr>
  22. <th>序号</th>
  23. <th>姓名</th>
  24. <th>分数</th>
  25. </tr>
  26. </thead>
  27. <tbodyid="l1">
  28. <tr>
  29. <td><inputtype="checkbox"/></td>
  30. <td>11</td>
  31. <td>12</td>
  32. </tr>
  33. <tr>
  34. <td><inputtype="checkbox"/></td>
  35. <td>21</td>
  36. <td>89</td>
  37. </tr>
  38. <tr>
  39. <td><inputtype="checkbox"/></td>
  40. <td>31</td>
  41. <td>99</td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. <scriptsrc="jquery-1.12.4.js"></script>
  46. <script>
  47. functionChoseAll(){
  48. // prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。
  49. $('#l1 input[type="checkbox"]').prop('checked',true);
  50. }
  51. functionCancelAll(){
  52. $('#l1 input[type="checkbox"]').prop('checked',false);
  53. }
  54. functionReverseAll(){
  55. // each()函数用于循环当前jQuery对象所匹配的元素
  56. $('#l1 input[type="checkbox"]').each(function(i){
  57. if($(this).prop('checked')){
  58. $(this).prop('checked',false);
  59. }
  60. else{
  61. $(this).prop('checked',true);
  62. }
  63. })
  64. }
  65. </script>
  66. </body>
  67. </html>
增减文本框:
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>test</title>
  6. </head>
  7. <body>
  8. <div>
  9. <p>
  10. <aonclick="Add(this);">+</a>
  11. <inputtype="text"/>
  12. </p>
  13. </div>
  14. <scriptsrc="jquery-1.12.4.js"></script>
  15. <script>
  16. functionAdd(ths){
  17. var ca = $(ths).parent().clone();
  18. ca.find('a').text('-');
  19. ca.find('a').attr('onclick','Remove(this);');
  20. $(ths).parent().parent().append(ca);
  21. }
  22. functionRemove(ths){
  23. $(ths).parent().remove();
  24. }
  25. </script>
  26. </body>
  27. </html>
文本操作和搜索条件:
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <inputtype="button"onclick="Add();"/>
  9. <ul>
  10. <li>123</li>
  11. <li>456</li>
  12. <li>789</li>
  13. </ul>
  14. <scriptsrc="jquery-1.12.4.js"></script>
  15. <script>
  16. $(function(){
  17. /* 可直接通过jQuery绑定click事件
  18. $('li').click(function () {
  19. alert($(this).text());
  20. });
  21. */
  22. /*delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。
  23. 此外,你还可以额外传递给事件处理函数一些所需的数据。
  24. 即使是执行delegate()函数之后新添加的元素,只要它符合条件,
  25. 绑定的事件处理函数仍然对其有效。
  26. 此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。
  27. 触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
  28. 要删除通过delegate()绑定的事件,请使用undelegate()函数。
  29. 从jQuery 1.7开始,请优先使用事件函数on()替代该函数。
  30. 该函数属于jQuery对象(实例)。*/
  31. $("ul").delegate("li","click",function(){
  32. alert($(this).text());
  33. });
  34. });
  35. functionAdd(){
  36. var tag = document.createElement('li');
  37. tag.innerText ='666';
  38. $('ul').append(tag);
  39. }
  40. </script>
  41. </body>
  42. </html>
 

附件列表

循序渐进Python3(十一) --4--  web之jQuery的更多相关文章

  1. Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC

    内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...

  2. 循序渐进学.Net Core Web Api开发系列【16】:应用安全续-加密与解密

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 应用安全除 ...

  3. 循序渐进学.Net Core Web Api开发系列【5】:文件上传

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍通 ...

  4. 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 前一篇文章 ...

  5. 循序渐进学.Net Core Web Api开发系列【1】:开发环境

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.本篇概述 本篇不 ...

  6. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  7. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  8. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  9. Web前端JQuery面试题(三)

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  10. Web前端JQuery面试题(二)

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

随机推荐

  1. opencv:直方图操作

    示例程序: #include <opencv.hpp> using namespace cv; using namespace std; int main() { Mat src, dst ...

  2. C#文件与文件夹操作

    (转自:http://www.csharpwin.com/csharpspace/6649r3960.shtml) C#文件操作:C#追加文件 StreamWriter sw = File.Appen ...

  3. LeetCode OJ :Unique Binary Search Trees II(唯一二叉搜索树)

    题目如下所示:返回的结果是一个Node的Vector: Given n, generate all structurally unique BST's (binary search trees) th ...

  4. QT中给程序加上主界面的图标

    首先在源码目录下面新建一个 myapp.rc的文件,在里面填写如下: IDI_ICON1 ICON DISCARDABLE "myappico.ico" (名字看自己的图片,注意图 ...

  5. 《Drools7.0.0.Final规则引擎教程》第4章 4.2 agenda-group

    agenda-group 规则的调用与执行是通过StatelessKieSession或KieSession来实现的,一般的顺序是创建一个StatelessKieSession或KieSession, ...

  6. JavaScript 中 this:

    在绑定事件时,this指定的是被绑定的那个html元素,比如: 结果: press里的this指的就是canvas.

  7. 【英语】Bingo口语笔记(84) - 惊讶的表达

  8. Oracle 实用技巧

    一.rlwrap 在 linux中使用sqlplus对数据库进行操作,常常由于敲错命令或需要反复执行某条语句,需要像linux本身有的历史回调的功能, rlwrap 可以用来支持oracle下sqlp ...

  9. SQL—数据分析

    留存分析——左连接 矩阵分析——group by 结构分析:分析每种产品占据总销售量的比例 排序分析

  10. next.js 简单使用

    1. 介绍 一个react.js 服务器端渲染开源项目(不只是服务器端渲染,直接也可以生成纯静态站点) 类似的解决方案有好多,比如react.js 自身的服务器渲染方案(但是使用起来就是比较怪异) g ...