欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JQuery初次体验

程序员文章站 2022-04-29 09:33:32
jQuery初级体验jQuery官网jQuery基本使用1.$()是jQuery的简写，含义一样2.$符号是一个函数基本概念1.jQuery是一个快速的，轻量的，功能丰富，高效的js库：它是对原生js的二次封装，所以我们在使用jq的时候，一般是调用jq所提供的函数2.js库：就是js文件，里面封装一些常用的方法，使用时直接引用js文件即可3.JavaScript是一门编程语言，jQuery仅仅是用JavaScript是实现的一个JavaScript库，目的是简化我们的开发入口函数...

jQuery初级体验

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对象的方法不能混用

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对象，他是一个伪数组，获取元素的方式与数组一样

JQuery初次体验

	3.通过索引或者get方式可以获取到dom元素

JQuery初次体验

CSS选择器

JQuery初次体验

过滤选择器

过滤器都带冒号：

JQuery初次体验

筛选选择器（方法）

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，`筛选选择器`主要是方法

children：可以获取指定元素的满足条件的所有直接子元素，如果没有传递参数，那么直接获取所有子元素，如果传入了具体的选择器，就会进行过滤

find：可以获取到指定元素的满足条件的所有后代元素，如果没有传递参数，那么无法获取到具体的资源随你，所以一般会进行参数的传递

JQuery初次体验

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

相关标签： 前端jQuery学习 jquery css3 javascript

上一篇： 王安石经常受到同僚夸赞，原来是因为这项制度

下一篇： 古代女子结婚为什么受重罚 朝廷对婚事为何逼得那么紧

推荐阅读