一. jQuery简介
1.1 jQuery官网
jQuery官网:
jquery官网地址：https://jquery.com/
jquery中文网址：https://www.jquery123.com/
1.2 jQuery概述
Query 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
实例:
如果点击出现的字体，就会在前端界面进行隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>
1.3 jQuery简单使用
导入（建议放在head里面）
<script src="./js/jquer.min.js"></script>
使用（直接使用）
// jQuery //他是核心的对象 里面的方法都是通过他来调用的
console.log(jQuery('body')); //通过jquery对象来调用获取方法
// 使用$来替代jQuery
console.log($('body'));
二. jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：
$(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
三. 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<ul id="box">
<li>1</li>
<li name='jack'>2</li>
<li class="inner">3</li>
<li>4</li>
</ul>
<script>
// JQuery核心对象，里面的方法都是通过他来调用的
console.log(jQuery('ul'))
// 使用$来代替JQuery
// $获取的是数组还是元素？
console.log($("#box"))//id为box
console.log($(".inner"))
console.log($("li"))
console.log($("ul>li"))
console.log($("li[name='jack']"))//使用 选择器+[属性名=属性值] 获取元素
// 按照使用的时候来决定获取的方式
console.log($("li").length)
Array.from($('li')).forEach(v => {
console.log(v)
});
console.log($('li:first'));//获取第一个li
console.log($('li:last'));//获取最后一个li
console.log($('li:eq(2)'));//获取下标为2的li元素
console.log($('li:odd'));//获取奇数下标
console.log($('li:even'));//获取偶数下标
</script>
</body>
</html>
四. jQuery事件
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquer.min.js"></script>
</head>
<body>
<div><button>点我</button></div>
<script>
// 事件类型 事件处理函数
$('button').on('click',data,function(e){
console.log(e)
console.log(e.data)
console.log(this)
})
// 可以在事件发布的时候携带数据 使用e.data接收
$('button').on('click',{name:"jack"},function(e){
e = e || window.event
console.log(e.data)
})
// 事件委托机制
$('div').on('click',function(e){
console.log(this)
console.log(e.target)
console.log($(e.target))
})
// 只有在button情况下click才会触发
$('div').on('click','button',{name:"jack"},function(e){
console.log(this)
console.log(e.data)
console.log(e.target)
})
// 取消事件off
$('div').off()
// 只执行一次的事件
$('button').one('click',function(){
console.log('点击了')
})
// 屏幕滚动栏距离
$(window).on('scroll',function(){
console.log($(window).scrollLeft())
console.log($(window).scrollTop())
})
// 自动执行事件
$('button').trigger('click',{name:"jack"})
</script>
</body>
</html>
网友评论