目录
1.基本路线
2.安装和下载jquery
按下ctrl+s,即可进行保存操作
在Hbuilder X中创建项目,然后导入
更改为绝对路径
<script src="/Jquery/js/jquery-3.6.3.js" type="text/javascript" charset="utf-8"></script>
3.Dom对象和JQuery包装集对象
Dom对象
JQuery包装集对象
两种对象
Dom对象转化为JQuery对象
JQuery转Dom
4.选择器
4.1基础选择器
类选择器 | .class属性 | $(".") | 选择类 |
id选择器 | #id属性 | $("#") | 选择id |
标签选择器 | 标签名 | $("标签名") | 选择标签 |
通用选择器 | * | $("*") | 指定所有元素对象 |
组合选择器 | 选择器1,选择器2.... | $("选择器1,选择器2.....") | 选择指定选择器中选中的对象 |
4.2层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
4.3表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") //所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域
5.JQuery的DOM操作
5.1获取和添加属性
5.2删除属性
6.操作样式
一开始
7.操作内容
8.添加元素
9.删除元素
$().remove()
10.遍历元素
$(" ").each()
11.加载元素
使用ready提前加载
12.绑定事件
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
例子
13.Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。
jQuery调用ajax的四种方式
- $.ajax
- $.get
- $.post
- $.getJSON
13.1 $.ajax
格式 $.ajax({})
写一个简单的ajax程序
重新创建一个文件夹,随便写入点数据
写ajax简单程序
运行