JQ语法选择器事件

什么是 jQuery ？

1.jQuery 是一个 JavaScript 函数库。

2.jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

3.jQuery 库包含以下功能：

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

注：除此之外，jQuery 还提供了大量的插件。

Vue JQ的安装

npm安装

npm i jquery --save

配置vue.config.js


const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Popper: ["popper.js", "default"]
      })
    ]
  }
}

最后再main.js 中全局引入一下


import jquery from 'jquery';
Vue.prototype.jquery = $

在项目中就可以直接使用


console.log($);
 
// ƒ (e,t){return new S.fn.init(e,t)}

语法

(1)、基础语法

1、美元符号定义 jQuery

2、选择符（selector）"查询"和"查找" HTML 元素

3、jQuery 的 action() 执行对元素的操作。


$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

选择器

和js css 相似多了一些关键字供我们更方便的选择元素


// html
    
        <li id="li1">1li>
        <li class="li2">2li>
        <li>3li>
        <li class="li3">
            <div class="one">div>
        li>
        <div class="box">div>

// js

console.log($('#li1'))//id

console.log($('.li2'))//class

console.log($('li'))//标签

console.log($('ul div'))//后代

console.log($('ul>li'))//子代

console.log($('li.li2'))//交集

console.log($('div,li'))//并集

console.log($('li:eq(2)'))//下标为2的 

console.log($('li:odd'))//下标为奇数

console.log($('li:even'))//下标为偶数

console.log($('ul').children('li'))//子代

console.log($('ul').find('li'))//后代

console.log($('.li2').siblings('li'))//.li2标签的兄弟li标签

console.log($('.li2').prev())//上一个兄弟

console.log($('.li2').next())//下一个兄弟

console.log($('.li2').parent())//父代

console.log($('.li2').index())//下标

console.log($('.one').index())

console.log($('.box').index())

console.log($('li').not('.li2'))//不带类名li2的li

console.log($('li').not('#li1'))//不带id为li1的li

事件

和 js 一致先有 dom 再绑定事件


// 1、单击事件
$("p").click(function(){ 
// 动作触发后执行的代码!! 
});
// 2、双击事件
$("p").dblclick(function(){
 	$(this).hide(); 
})
// 3、鼠标进入
$("#p1").mouseenter(function(){ 
alert('您的鼠标移到了 id="p1" 的元素上!'); 
});
// 4、鼠标离开
$("#p1").mouseleave(function(){ 
alert("再见，您的鼠标离开了该段落。"); 
});
// 5、获取焦点
$("input").focus(function(){ 
$(this).css("background-color","#cccccc"); 
});
// 6、失去焦点
$("input").blur(function(){ 
$(this).css("background-color","#ffffff"); 
})

一行实现tab切换

有了 jq 的帮助我们可以很方便的实现tab切换一行js直接搞定 (例子中没有写样式)

用到了jQuery隐藏显示 可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。


// html
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
    <main>
        <div>1div>
        <div>2div>
        <div>3div>
    main>
// js
$('li').click(function(){
    $('div').eq($(this).index()).show().siblings().hide()  
})

JQ语法 选择器 事件

什么是 jQuery ？

Vue JQ的安装

语法

选择器

事件

一行实现tab切换

JQ语法选择器事件