前端 之 jQuery

文章目录

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程，jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。

实例找到div标签并给div标签设置为红色

原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');

jQuery的安装：

您可以从网页中添加 jQuery

1、从官网http://jquery.com/download/下载 jQuery 库

里面分为：Production version（用于实际的网站中，已被精简和压缩）和Development version（用于测试和开发，未压缩，是可读的代码），一般使用Production version压缩版本的。

2、从 CDN 中载入 jQuery, 如从 Google 或 百度 中加载 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>

一定要先导入后使用

jQuery 语法

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

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

jQuery 选择器可以对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找HTML 元素。它基于已经存在的 CSS 选择器外，还有一些自定义的选择器。

基本选择器：

ID选择器、类名选择器、标签选择器、组合选择器

• 提出注意点，原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象

DOM对象与jQuery对象互相转换
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)

层级选择器

基本筛选器

/用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

最后一个has的玩法需要写个三个div:一个空div、一个儿子有a标签、一个儿子没有a，孙子有a标签
$('div:has(a)')
输出：
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]

样式操作

常用实例：

三级菜单展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')

直接操作css属性

// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')

// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})

位置操作

// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})

// position只能获取值，不能设置值

// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 设置滚动条偏移量

文本操作

text() html() 不加参数获取值，加参数设置值
val() 不加参数获取值，加参数设置值

属性操作

// 获取文本属性
$('#d1').attr('s1')  // 获取属性值
$('#d1').attr('s1','haha')  // 设置属性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
$('#d1').removeAttr('taidi')  // 删除一个属性

// 获取check与radio标签的checked属性
$('#i1').prop('checked')
$('#i1').prop('checked',true)

文档处理

// 标签内部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 标签内部头部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 标签外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 标签外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 替换标签
replaceWith()  // 什么被什么替换
replaceAll()  // 拿什么替换什么

// 克隆事例
<button id="b2">屠龙宝刀，点击就送</button>
// clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true参数
  });

表单筛选器

// 针对表单内的标签
$('input[type="text"]')
// 简化写法
$(':text')

// 找到所有被选中的checkbox
$(':checkbox')  // 注意select框中默认selected标签也会被找到
$('input:checkbox')

遍历方法

each() 方法为每个匹配元素规定要运行的函数。
$.each(array,function(index){
  console.log(array[index])
})
$.each(array,function(){
  console.log(this);
})
// 支持简写
$divEles.each(function(){
  console.log(this)  // 标签对象
})

jQuery链式操作

python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回

<div>
	<p>p1</p>
	<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');

jQuery 事件

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。为了防止网页还没加载完，js代码就已经执行，通常利用下面两种方式来书写js代码。

$(document).ready(function(){
// 在这里写你的JS代码...
})

网页最后
$(function(){
// 在这里写你的代码
})

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

在下面的实例中，当点击事件在某个<p> 元素上触发时，隐藏当前的 <p> 元素：

$("p").click(function(){ 
  $(this).hide(); 
});

dblclick()

当双击元素时，会发生 dblclick 事件。

$("p").dblclick(function(){ 
  $(this).hide(); 
});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

$("#p1").mouseenter(function(){ 
  alert("鼠标经过了!"); 
});

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

$("#p1").mouseleave(function(){ 
  alert("鼠标离开了!"); 
});

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

$("#p1").mousedown(function(){ 
  alert("鼠标按下!"); 
});

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

ouseup(function(){ 
  alert("鼠标松开!"); 
});

hover()

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(function(){ 
  alert("你的光标悬停！"); 
  }, 
  function(){ 
  alert("你的光标已经离开！"); 
});

focus()

当元素获得焦点时，发生 focus 事件。

$("input").focus(function(){ 
  $(this).css("background-color","#eee"); 
});

当元素失去焦点时，发生 blur 事件。

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

input()

input实时监听，输入内容时发生 input 事件

$('#i1').on('input',function () {
        console.log($(this).val())
    });

取消标签默认的事件

利用preventDefault()
$('input').click(function (e) {
        alert(123);
        e.preventDefault();  
    });
直接返回false
$('input').click(function (e) {
        alert(123);
        return false；
    });

事件冒泡

iv>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });

事件委托

<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

jQuery自带的动画效果

下面的表格列出了用于创建动画效果的 jQuery 方法。

标签记得设置高和宽
$('img').hide(5000)
$('img').show(5000)

$('img').slideDown(5000)
$('img').slideUp(5000)

$('img').fadeIn(5000)
$('img').fadeOut(5000)
$('img').fadeTo(5000,0.4)