一、概述

1.1 介绍

jquery是JavaScript的集成类库，里面有很多写好的可以直接调用的类，方便开发。

1.2 网络资源

文档网站
https://jquery.cuishifeng.cn/
官网
https://jquery.com/
cdn jquery
https://www.jq22.com/cdn/

1.3 快速入门

公式
$(selector).action()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 在线选择器 --><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><button id="bt">点我</button><script type="text/javascript">'use strict'// id选择器+点击事件$('#bt').click(function(){alert('hello,jquery');})</script></body>
</html>

二、选择器

2.1 介绍

选择器就是css的选择器，写法完全和css相同。

2.2 JavaScript和jQuery选择器区别

// 原生JavaScript选择器
document.getElementsByTagName(); // 标签选择器
document.getElementsByClassName(); // 类选择器
document.getElementById(); // id选择器
// jQuery中的选择器+点击事件
$('p').click(); // 标签选择器
$('#id1').click(); // 类选择器
$('.class1').click(); // id选择器

三、事件

3.1 鼠标事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 在线选择器 --><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><!-- 需求：获取当前鼠标坐标 --><div id="divmove"><span>在这里移动鼠标</span><br>鼠标：<span id="mouseMove"></span></div></body><script>// 当网页加载完成后，响应事件 全写// $(document).ready(function() {// })// 简写$(function() {// 鼠标移动完毕事件$('#divmove').mousemove(function(e) {$('#mouseMove').text('x:' + e.pageX + ' ' + 'y:' + e.pageY);})});</script><style>#divmove {width: 70%;height: 300px;border: solid 1px red;}</style>
</html>

四、操作Dom元素

// 节点文本操作
$('#test-ul li[name=python]').text('C++'); // 设置值
$('#test-ul li[name=python]').text(); // 获取值
$('#test-ul').html('<strong>ccc<strong>'); // 设置值
$('#test-ul').html(); // 获取值
// css操作
$('#test-ul').css('color','red'); // 调用css改变样式
$('#test-ul li[name=python]').hide(); // 隐藏选中的标签
$('#test-ul li[name=python]').show(); // 显示选中的标签

全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></head><body><ul id="test-ul"><li class="js">Java</li><li name="python">Python</li></ul><script>//$(function() {$('#test-ul li[name=python]').text('C++');//})</script></body>
</html>

jQuery（JavaScript类库）相关推荐

超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
超棒的视差滚动效果javascript类库 - Jarallax
为什么80%的码农都做不了架构师?>>> 日期:2012-9-27 来源:GBin1.com 如果你没有听说过视差滚动的话,说明你真out了,作为2011年最流行的网站设计效 ...
灵活的数据管理和展示javascript类库 - Recline.js
日期:2012-7-15 来源:GBin1.com 在线演示今天我们介绍一款用来创建数据相关应用的开源Javascript类库 - Recline.js,使用这个类库可以帮助你使用Javascri ...
javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
jQuery JavaScript库达到新的里程碑
一.什么是JQuery? Jquery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Saf ...
【简报】超棒的拖放式文件上传javascript类库：FileDrop
为什么80%的码农都做不了架构师?>>> 日期:2012-8-30 来源:GBin1.com 今天推荐一款来自俄国web开发人员的支持拖放的跨浏览器javascript文件上 ...
分享一个帮助你自定义标签并且兼容现代浏览器的javascript类库 : X-tag
为什么80%的码农都做不了架构师?>>> 日期:2012-6-26 来源:GBin1.com 今天我们介绍一个能够帮助你自定义标签的js类库:x-tag,使用这个类库可以快速 ...
创新的缩略图展示javascript类库 - Kort.js
在线演示本地下载 Kort.js是一个迷你的javascript类库,能够使用充满创意的方式来展示一系列的缩略图,同时支持触摸设备.你可以将鼠标悬浮放置到缩略图图片上,能够生成一系列的缩略图展示效 ...
超酷的实时颜色数据跟踪javascript类库 - Tracking.js
来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...

jQuery（JavaScript类库）

文章目录

一、概述

1.1 介绍

1.2 网络资源

1.3 快速入门

二、选择器

2.1 介绍

2.2 JavaScript和jQuery选择器区别

三、事件

3.1 鼠标事件

四、操作Dom元素

jQuery（JavaScript类库）相关推荐

最新文章

热门文章