jQuery——（1）基础

程序员文章站 2024-03-06 10:32:31

...

一、jQuery是什么？

jQuery是一个JavaScript库，极大的简化了JavaScript编程
jQuery库可以通过一行简单的标记被添加到网页中
包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

二、为什么使用jQuery？

jQuery是目前最流行的 JS 框架，而且提供了大量的扩展。
jQuery兼容于所有主流浏览器，包括IE6

可以在 HTML 的

// 这里是下载jQuery以后，引用
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

// 下面是通过 CDN （内容分发网络）引用它
// Staticfile CDN
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

// 百度 CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

// Microsoft CDN
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

其实还有很多的 CDN。
使用 CDN 的jQuery，有一个很大的优势：
当用户访问过你百度、微软等网站，加载了jQuery。当你去访问其他站点时，就可以从缓存中加载对应的jQuery了，这样可以减少加载事件。
同时，大多数 CDN 都可以确保当用户向其请求jQuery文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

三、jQuery语法

jQuery语法：通过选取 HTML 元素，并对它们执行某些操作。

jQuery使用的语法时 XPath 和 CSS 选择器语法的组合
基础语法：$(selector).action()

$ 定义 jQuery
selector (选择器) : 查询和查找 HTML 元素（这里的选择器和 CSS 里的选择器类似）
action() ：执行对元素的操作


$(this).hide() // 隐藏当前元素，也就是HTML页面中，鼠标点击所在的元素就会被隐藏

$("p").hide()  // 隐藏所有 <p> 元素

$("p.test").hide()  // 隐藏所有 class="test" 的 <p> 元素

$("#test").hide()  // 隐藏 id="test" 的元素

文档就绪事件
为了防止文档在完全加载之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

// 简洁写法，与以上写法效果相同
$(function(){
 
   // 开始写 jQuery 代码...
 
});

// JS 入口函数
window.onload = function () {
    // 执行代码
}

jQuery——（1）基础

四、jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
jQuery 选择器基于元素的id、类、类型、属性、属性值等选择 HTML 元素。它基于已经存在的 CSS选择器，，除此之外，它还有一些自定义的选择器。
jQuery中所有选择器都以没有符号开头：$()

4.1 元素选择器

// 在页面中选取所有 <p> 元素
$("p")

4.2 #id 选择器

// 在页面中选取 id="test" 的元素
$("#test")

4.3 .class 类选择器

// 在页面中选取所有 class="test" 的元素
$(".test")

五、jQuery 事件

事件：页面对不同访问者的响应
事件处理程序：当 HTML 中发生某些事件时所调用的方法
jQuery：为事件处理特别设计的

常见的 DOM 事件：
鼠标事件：

click：单击触发
dbclick：双击触发
mouseenter：当鼠标指针触到元素时，会发生该事件
mouseleave：当鼠标指针离开元素时，会发生该事件
mousedown：当鼠标指针移动到元素上，并按下鼠标按键时
mouseup：当在元素上松开鼠标按键时
hover：用于模拟光标悬停（mouseenter、mouseleave）事件

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

键盘事件

keypress：在键盘上按下某键，并产生一个字符时，发生，返回 ASCII 码
keydown：在键盘上按下某键时，发生，返回键盘代码
keyup：在键盘上松开某键时，发生，返回键盘代码

keypress([ data ,]  handler);
// data：通过event.data 传递给事件处理函数的任意数据
// handler：指定的事件处理函数
// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.
var validKeys = { start: 65, end: 90  };
$("#keys").keypress( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

表单事件

submit
change
focus：当元素获得焦点时，发生
blur：当元素失去焦点时，发生

// focus，这个可以用来更改输入框的样式
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

// blur
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

文档/窗口事件

load
resize
scroll
unload

jQuery 事件方法语法：
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

// 页面中指定一个点击事件
$("p").click();

// 通过一个事件函数实现什么时间触发事件
$("p").click(function(){
    // 动作触发后执行的代码!!
});

jQuery——（1）基础

一、jQuery是什么？

二、为什么使用jQuery？

三、jQuery语法

四、jQuery 选择器

4.1 元素选择器

4.2 #id 选择器

4.3 .class 类选择器

五、jQuery 事件

使用Java进行图像处理的一些基础操作

jQuery——（1）基础

力扣之链表1—19. 删除链表的倒数第N个节点

Android 使用Vitamio打造自己的万能播放器（1）——准备

【LeetCode】1004. Max Consecutive Ones III 最大连续1的个数 III（Medium）（JAVA）

LeetCode——1004. 最大连续1的个数 III(Max Consecutive Ones III)[中等]——分析及代码（Java）

javaBean的基础知识及常见乱码解决方法

Java基础--反射机制

leetcode 1004.最大连续1的个数 Max Consecutive Ones III Java版本

mysql基础8-运算符、函数、索引