JQuery（自用）

最新推荐文章于 2021-10-21 13:21:58 发布

?sterben

最新推荐文章于 2021-10-21 13:21:58 发布

阅读量100

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45906102/article/details/115607260

版权

笔记专栏收录该内容

64 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

快速入门

第一步：导入jar包
第二部完成操作

$(function(){
	alter("hello jquery")
});

jQuery(callback)

jQuery(callback)它是$(document).ready()的简写。
$(document).ready(function(){});页面加载完成后，指定的函数执行。
在这里插入图片描述

jQuery(html,[ownerDocument])

jQuery(html代码)它的作用是将一个dom对象包装成jquery对象。
问题:什么是jquery对象?
我们的jquery中定义的方法与属性，只有jquery对象可以调用。

这个核心函数的作用是将一个dom对象包装成了jquery对象
而它的第一个参数是html代码.
它的第二个参数是可选，它用于设置dom的相关属性.

jQuery([selector,[context]])

这个函数我们使用它的主要作用是用于在页面上查找，根据css选择器.
参数1就css选择器 jquery中提供了九种选择器
参数2 context 就是指定要查找的dom集.

关于jquery对象与dom对象转换

对于dom对象-----jquery对象 $(dom)
对于jquery对象----dom对象 jquery对象[0] 或 jquery.get(0)
在这里插入图片描述

基本选择器

在这里插入图片描述

#id 根据 id属性查找一个元素
Element 根据元素的标签名称查找元素
.class 根据元素的class属性查找元素
*匹配所有元素
Select1,selector2…将每一个选择器匹配到元素合并后一起返回

在这里插入图片描述

得到id=d1的元素中的内容显示出
将class=d元素中的内容后面添加欢迎你
得到id=d1这个div在整个页面上是第几个.
得到class=d的元素有几个
将所有的class=d或id=d1元素中的内容设置为java

    <script>
      $(function () {
        var heml = $("#d").html();
        alert(heml);
        var test=$("#d").test();
        alert(test);
        $(".d").each(function (i) {
          $(this).html($(this).html() + "欢迎你");
        });
        var index = $("div").index($("#d"));
        alert(index);
        var size = $(".d").size();
        alert(size);
        $(".d,#d").html("java");
      });
    </script>
  </head>
  <body>
  <div id="d"><a>wu</a></div>
  <div class="d">xiao</div>
  <div class="d">kang</div>
  <div>feng</div>

a. html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
b. text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
c. each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个元素的序号，在函数中可以通过this来获取其dom对象
d. index()方法，它可以判断元素的序号

层级选择器

层级选择器是根据元素的关系来获取。关系是指父子关系，兄弟关系
在这里插入图片描述

空格得到元素下的所有子元素(包含直接子元素与间接子元素)
大于号> 只获取直接的子元素
加号+ 只获取直接的一个兄弟元素
波浪线~ 所有的后边的兄弟元素
获取id=d的所有子元素
获取id=d 的直接子元素
获取id=d第一个
兄弟元素
获取id=d的所有
兄弟元素
将id=d下的所有子元素的文字颜色设置成红色

css()方法，它可以设置元素的样式,如果只有一个值 css(name,value),如果有多个值,css({name:value,name:value})

过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。
在这里插入图片描述

内容过滤选择器

在这里插入图片描述

可见性过滤选择器

可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.
在这里插入图片描述

val() 获取元素当前的值 value值
show() 让元素显示出来
hide() 让元素隐藏起来

属性过滤选择器

根据元素的属性来过滤
在这里插入图片描述
^=匹配开始
$=匹配结尾
*=匹配包含

attr()设置或返回被选元素的属性值。

子元素过滤选择器

在这里插入图片描述

根据子元素顺序来获取。
nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置
也可以通过倍数来设置
first-child 获取第一个
last-child 获取最后一个
only-child 获取只有一个子元素
在这里插入图片描述

表单过滤选择器

表单过滤选择器是用于选取表单中的元素
在这里插入图片描述

trim()它是去掉字符串左右空格
失去焦点事件 blur(function(){})
click(function(){}) 点击事件
submit() 表单提交

表单对象属性过滤选择器

在这里插入图片描述

checked它是用于radio,checkbox 判断选中
selected它是用于select下拉框选中。
在这里插入图片描述

jQuery DOM操作

文档处理

插入操作
在这里插入图片描述

删除

替换与克隆
替换操作

克隆操作

筛选

过滤
在这里插入图片描述
过滤操作它相当于是我们在jquery中使用的过滤选择器，例如 eq可以根据序号来获取元素 first与last来获取第一个元素与最后一个元素

查找
在这里插入图片描述
是通过当前元素，获取祖先元素，父元素子元素等。
find方法，它可以直接来查找指定的元素.

jQuery事件机制

jQuery事件介绍

在这里插入图片描述
Jquery中的事件与传统的javascript中事件区别:
Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.

事件绑定

传统的javascript中事件绑定操作
在这里插入图片描述

Jquery事件绑定操作

问题 bine与live它们的区别?

一次性事件和自动触发

在这里插入图片描述
one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger()在每一个匹配的元素上触发某类事件

事件切换

hover
这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。
在这里插入图片描述
toggle
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

jQueryAjax编程

jquery ajax开发介绍

在这里插入图片描述
1. $. a j a x () 它是 j q u e r y 提供的最基本的 a j a x 编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到 X M L H t t p R e q u e s t 对象中。 2 . l o a d g e t p o s t 它们简化了$ .ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。
3.getScript getJSON 它们是用于解决ajax跨域问题的。

load使用(了解)

载入远程 HTML 文件代码并插入至 DOM 中.
实现一个用户名验证是否可以使用案例

浏览器端
在这里插入图片描述
注意事项:

load方法是将服务器响应的数据直接插入到指定的dom元素中。
jquery中的load方法它的请求方式是什么?
a) 如果有参数请求方式是post
b) 如果没有参数请求方式是get

服务器端
在这里插入图片描述

$.ajax介绍（了解）

$. a j a x 它是 j q u e r y 中最基本的 a j a x 操作， l o a d g e t p o s t 都简化了$ .ajax操作.
在这里插入图片描述

$. p o s t 与$ .get介绍（重要）

$. g e t 与$ .post它们针对于get与post请求
在这里插入图片描述

jQuery ajax开发基于json(重点)

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.
json简单说就是javascript中的对象和数组.
对象: {key：value,key：value,…}
数组: [“java”,“javascript”,“vb”,…]
注意:在json中它的两种结构可以互相嵌套
{key:[value1,value2],key:value}
[{name:xxx},{key:value},{key:value}]

Fastjson介绍

将java的对象转换成json数据,也可以将一个json转换成java对象(不常用).
Fastjson是阿里提供的一个开源json插件.

导入相应的jar包
演示fastjson将java对象转换成json数据

String  json=JSONObject.toJsonString(java对象);

问题:将java对象转换成json时，名称是否可以自己来指定?
在这里插入图片描述
问题:如果java对象中存在日期类型属性java.util.Date,是否可以用指定的格式来转换成json。

问题:如果java类中的某些属性不想生成json中？

问题:关于fastjson将java对象转换成json时的循环引用问题?

通过以下设置可以取消循环引用
在这里插入图片描述

jQuery ajax开发基于xml(了解)

可以使用XStream工具来完成xml与java对象之间的转换。它也可以完成java对象与json之间的转换。
问题:XStream使用时需要导入哪些jar包？
在这里插入图片描述

问题:XStream怎样将java对象转换成xml?

关于XStream相关的常用方法

1.设置别名
在这里插入图片描述

2.忽略属性
在这里插入图片描述

3.将类的属性设置成xml中字段的属性
在这里插入图片描述
注解使用

要想使用XStream的注解，必须开启注解扫描.
在这里插入图片描述

?sterben

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery（自用）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。快速入门第一步：导入jar包第二部完成操作$(function(){ alter("hello jquery
复制链接

扫一扫