JQuery

最新推荐文章于 2021-02-20 14:12:29 发布

大鳥

最新推荐文章于 2021-02-20 14:12:29 发布

阅读量156

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_40025337/article/details/79175634

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery概念：jQuery对JavaScript中的DOM操作进行了封装，使用方便简介。
语法：$(selector).action();
$() 工厂函数，将DOM对象转化为jQuery对象
selector 选择器（重点），获取需要操作的DOM元素
.action() 操作方法，jQuery中提供的方法，包括绑定事件处理的方法

jquery中的DOM操作
1、样式操作
单独样式操作：css(name,value)
多个样式设置：css({name1:value1,name2:value2,...})

jQuery的选择器(重点)
用于选择网页中的元素
类css选择器
基本选择器：id class 标签交集并集（${"div，p"}）
层次选择器：后代（${"div p"}）子代（${"div>p"}）
属性选择器：${"[alt='?'][arc]"}表示带有alt和arc属性的标签
追加和移除样式
addClass("class")或addClass("class1 class2 ...")
removeClass("class")或addClass("class1 class2 ...")

过滤选择器
:first
:last
:even
:odd

jQuery的事件

jquery实现ajax

dom对象和jquery对象之间转化（不经过转化的对象不能调用其他的方法）
dom>>>>jquery:
获得dom对象
var d = document.getElementById("id");
转换
var $d=${d}
jquery>>>>dom:

html text val使用方法和区别(在jquery中使用)？？？

html():返回文本 html("xxx<p>ooo</p>")设置文本，识别“”之间的标签
text():返回文本 text("xxx<p>ooo</p>")设置文本，不能识别“”之间的标签
val():返回标签内value的值 val("xxxxx")设置标签内的value的值，不识别标签
节点操作
<script type="text/javascript">
$(function() {
$("button").click(function() {//通过selector(选择器)获取节点
var $li = $("<li>4</li>");//使用HTML字符串创建节点
$("ul").append($li);//节点内部最后面插入子节点：
$("$li").prepend($li);//节点内部前置面插入子节点
});
});
</script>
<body>
<button>点击获取</button>
<br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

创建节点(*)
使用HTML字符串创建节点（*）
var $li = $("<li></li>")
通过selector(选择器)获取节点
$("")
插入节点(*)
元素内部插入子节点：
$(A).append($(B));后置插入=$(B).appendTo($(A))

$(A).prepend($(B));前置插入=$(B).prependTo($(A))
外部同级插入
$(A).after($(b));后置插入=$(A).inserBefore($(b))
$(A).inserAfter($(b));前置插入=$(A).before($(b))

删除节点(*)
remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容（标签内部的所有内容，包括子标签）
替换节点
replaceWith()
replaceAll()
复制节点
$(A).clone(true).appendTo(B);//true表示复制其事件

属性操作(*)
获取或设置匹配元素的属性值
获取元素的某属性的值：$(selector).attr("属性名");
设置[多个]元素的属性值：$(selector).attr({"属性1":"值1"[, "属性2":"值2"}]);
删除一个属性
$(selector).removeAttr( "属性名称" );
获取父级元素
parent():获取父级元素
parents():获取祖先元素【返回值是数组，可以用for或each遍历】
获取所有子元素（不考虑后代元素及文本节点）
$("A").children();
遍历(*)
var $lis = $("li");
//for循环遍历
for(var i=0; i<$lis.length; i++) {
var text = $lis[i].innerText;//获取li标签的文本
alert(text);
}

each：//遍历
$("li").each(function(i) {
var text = $(this).text();//获取li标签的文本
alert(text);
设置宽高，偏移量
height([value]):返回[设置]匹配元素的高度
width([value]):返回[设置]匹配元素的宽度
offset([value]):返回以像素为单位的top和left左表(仅对可见元素)

事件
基础事件
window事件

鼠标事件
.click()
.mouseover()
.mouseout()

键盘事件
.keydown()
.keyup()
.kepress()

表单提交事件
.focus()获得焦点--------:focus表示获得焦点的元素
.blur()失去焦点---------:biur表示失去焦点的元素
.submit()提交事件
复合事件
绑定事件
.bind()
.unbind()

.on()
.off()

.hover(fu1,fu2)(相当于mouseover与mouseout事件的组合)

连续点击事件&展开/隐藏
.toggle(fn,fn,fu...);

jquery动画效果
show&&hide

json（js object notation）是js的对象，作为描述数据的一种格式，主要作为数据交互的工具，xml同样可以，但xml主要用于文件配置。

数据类型：
String
number
boolean
数组
对象

JSON 是一种轻量级的数据交互格式(以键值对的格式)
语法：var JSON = {名称 : 值 ,名称 : 值 ,….}
var JSON =
{"student":[
{"name":"tom","age":"21"},{"name":"jed","age":"23"}
]
}
取值：JSON.student[1].age>>>>>>>23
ajax
异步请求原理和实现，

js实现的方法
$.ajax()(*)
$.get()(*)
$.post()(*)
$.getJSON()(*)

$.getScript()
load()

大鳥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

jQuery概念：jQuery对JavaScript中的DOM操作进行了封装，使用方便简介。语法：$(selector).action();$() 工厂函数，将DOM对象转化为jQuery对象selector 选择器（重点），获取需要操作的DOM元素.action() 操作方法，jQuery中提供的方法，包括绑定事件处理的方法jquery中的DOM操作1、样式操作
复制链接

扫一扫