第一章 JQuery入门 ① 笔记_在jquery 的环境下,选择器“.”和“#”的区别是什么?-CSDN博客

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125411279

本文详细介绍了jQuery的基础知识，包括jQuery是什么、如何搭建开发环境、jQuery语法、选择器、属性操作、对象遍历、CSS操作、事件绑定和动画效果。jQuery作为一个JavaScript库，简化了DOM操作和事件处理，尽管部分功能已被现代CSS和JavaScript替代，但其链式编程和丰富的插件依然使其在开发中占有一定地位。文中还提供了实际的代码示例，帮助读者理解和运用jQuery。

摘要由CSDN通过智能技术生成

第一章 JQuery入门 ① 笔记

课程目标
掌握jq

本章目标

jQuery简介
搭建jQuery开发环境
jQuery简单入门
jquery的选择器

第一节：jQuery简介

1.什么是jQuery

框架：半成品软件
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery优点：
强大的选择器
在这里插入图片描述

优秀的DOM操作
1.js操作DOM麻烦，用jq操作简化，jq过时了。
完善的事件处理机制
2. 跟js差不多
动画效果
1.js使用定时器写动画，运动框架，现在因为css的高度发展，css3的出现，直接导致，jq动画过时了。
2. ajax 异步编程
链式编程
链式操作是指对发生在同一jQuery对象上的一组动作，可以直接连写而无需重复获得对象，这是jQuery的特色，使得jQuery编码无比优雅
1.jquery.js框架已经过时了，因为有了vue.js 框架，但是还是要掌握。
Jquery就是封装好的js 本质上还是js

第二节：jQuery使用

jQuery 教程 jQuery教程

（ jQuery 教程超链接：https://www.w3school.com.cn/jquery/index.asp）

1.搭建jQuery环境
方法一：
去jquery官网下载jQuery.js文件，然后引入到项目中
方法二：
打开Hbuilder—>新建项目—》新建js文件—》勾选jQuery的版本（如下图所示）—》引入到页面中
在这里插入图片描述

jQuery语法：
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
jQuery(selector).action()
 美元符号定义 jQuery
 选择符（selector）“查询"和"查找” HTML 元素
 jQuery 的 action() 执行对元素的操作

2.jQuery选择器

主要用来获取元素对象
在这里插入图片描述

3.jQuery属性操作

在这里插入图片描述
上述方法，如果括号中带有参数那么就表示设置/修改属性
如果括号中不写参数：就表示获取数据
 text() - 设置或返回所选元素的文本内容
 html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#res{
border:1px solid gray;
display:inline-block;
width:100px;
height:20px;
margin-top:10px;
}
</style>
</head>
<body>
<input type="text" name="num1" id="num1" placeholder="数字1"/>
<input type="button" value="+" id="btn" />
<input type="text" name="num2" id="num2" placeholder="数字2"/>
=
<span id="res"></span>

<!--引入jquery-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<!--定义自己代码块-->
<script type="text/javascript">
//alert($);
/*btn.onclick=function(){
alert(123);
}*/
//jquery绑定元素事件
//1.获取元素:使用三种选择器 $("#id名") $(".类名") $("标签名")
//2.绑定元素的特定事件:$().click(函数)
$("#btn").click(function(){
//获取两个文本框的数据
var n1 = $("#num1").val()
var n2 = $("#num2").val();
//计算结果
var jg = Number(n1)+Number(n2);
//讲结果设置到span中
$("#res").html(jg);
// val() : 获取表单元素的数据
// val(数据):设置表单元素的值
//html() : 获取非表单元素的内容
//html(数据):设置非表单元素的值
})
/*
$("#btn").mouseover(function(){
alert(123);
})*/
</script>
</body>
</html>

 hide()–隐藏 ===》display:none;
 show()–显示 ===》display:block/inline;
size()/length–长度
在这里插入图片描述

4.jQuery对象的遍历，要注意js对象和jQuery对象的区别和转换

// A code block
var foo = 'bar';

jquery对象和js对象的区别

使用document对象的相关方法来获取HTML元素——js的dom对象
通过jQuery对DOM对象进行封装后产生的对象——jquery对象
js它不能调用jQuery中的html()和val()方法/相关方法和属性；
jquery它不能调用js中的innerHTML和value属性/相关方法和属性。