JQuery初次体验
程序员文章站
2022-09-05 23:52:37
jQuery初级体验jQuery官网jQuery基本使用1.$()是jQuery的简写，含义一样2.$符号是一个函数基本概念1.jQuery是一个快速的，轻量的，功能丰富，高效的js库：它是对原生js的二次封装，所以我们在使用jq的时候，一般是调用jq所提供的函数2.js库：就是js文件，里面封装一些常用的方法，使用时直接引用js文件即可3.JavaScript是一门编程语言，jQuery仅仅是用JavaScript是实现的一个JavaScript库，目的是简化我们的开发入口函数...
jQuery初级体验
jQuery基本使用
1.$()是jQuery的简写，含义一样
2.$符号是一个函数
基本概念
1.jQuery是一个快速的，轻量的，功能丰富，高效的js库：它是对原生js的二次封装，所以我们在使用jq的时候，一般是调用jq所提供的函数
2.js库：就是js文件，里面封装一些常用的方法，使用时直接引用js文件即可
3.JavaScript是一门编程语言，jQuery仅仅是用JavaScript是实现的一个JavaScript库，目的是简化我们的开发
入口函数
-- 第一种：$(function{函数体}) 功能类似window.onload
-- window.onload：如果绑定多次，会造成覆盖，而jq的入口不会覆盖，可以同时添加多个额
-- 入口函数不要写成箭头函数
$(function () {
//获取元素是最好使用$开头，书写规范
//jq中的元素获取
let $btn1=$("#btn1");
console.log($btn1);
$btn1.click(function () {
console.log("sss")
})
})
第二种：$(document).ready(function(){函数体})
$(document).ready(function () {
let $btn1=$("#btn1");
console.log($btn1);
$btn1.click(function () {
console.log("sss")
})
})
jQuery写法格式演示
需求：点击按钮btn1，让三个div显示
获取btn1的元素+绑定事件+让三个div出现，使用淡入效果来显示隐藏的div单位为毫秒
获取btn2的元素+绑定事件+给div设置文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 100px;
background-color: #f99;
margin-top: 10px;
display: none;
}
</style>
</head>
<script src="./js/jquery-1.12.4.js"></script>
<body>
<button id="btn1">展示div</button>
<button id="btn2">设置内容</button>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
$("#btn1").click(function () {
$("div").fadeIn(2000);
});
//使用jq来注册事件，是不存在覆盖问题
$("#btn1").click(function (){
console.log(123);
})
$("#btn2").click(function () {
$("div").text("你好，jQuery");
})
</script>
jQuery对象与DOM对象(重点)
基本概念
1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM 对象的集合（伪数组））
jQuery对象与DOM对象的区别
DOM对象与jQuery对象的方法不能混用
DOM对象可以和jQuery对象相互转化
注意：jq对象不能直接调用dom对象的方法，dom元素也不能调用jq对象的成员
jQuery对象与DOM对象互相转换
1.dom对象转换jq对象：
let $li = $(“li”);
//第一种（推荐使用）
$li[0];
//第二种方法
$li.get(0);
2.jq对象转换dom对象
let $obj=$(domobj);
// $(document).ready(function(){}); 就是典型的DOM对象转jQuery对象
jQuery选择器
获取元素的方法
1.方式$(选择器) 选择器：标签选择器，类选择器，ID选择器
2.jQuery完全兼容CSS选择器，跟CSS的选择器一模一样
*小建议：如果使用jq的方式获取元素，一般在名称前面加一个$，当然加不加随意*
2.通过$()获取的元素简称jq对象，他是一个伪数组，获取元素的方式与数组一样
3.通过索引或者get方式可以获取到dom元素
CSS选择器
过滤选择器
过滤器都带冒号：
筛选选择器（方法）
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，`筛选选择器`主要是方法
children：可以获取指定元素的满足条件的所有直接子元素，如果没有传递参数，那么直接获取所有子元素，如果传入了具体的选择器，就会进行过滤
find：可以获取到指定元素的满足条件的所有后代元素，如果没有传递参数，那么无法获取到具体的资源随你，所以一般会进行参数的传递
mouseover 与 mouseenter
mouseover 和 mouseoverenter 都有鼠标经过的意思，但是在注册鼠标经过事件的时候，推荐使用`mouseenter
mouseenter 与 mouseover 的不同
1.mouseover与mouseout是一对事件，当鼠标经过当前元素或者当前元素的子元素的时候，mouseover事件都会触发【事件冒泡】。
2.mouseenter 与mouseleave是一对事件，只有当鼠标经过当前元素时，事件会触发，鼠标经过子元素，mousenter事件是不会触发的。
index方法
index() 方法返回的是当前元素在所有兄弟元素里面的索引。
当碰到这种结构的时候，推荐给li注册事件，这样通过index方法才能获取到正确的索引值。
<ul>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
<li><a href="#">我是链接</a></li>
</ul>
jQuery与Javascript
JavaScript是一门编程语言，jQuery仅仅是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。
今天是体验jQuery的第一天做的总结，大家可以看看，如有不好之处请谅解
本文地址：https://blog.csdn.net/weixin_43434858/article/details/109568678