jQuery-语言基础整理
jQuery是js的一个类库,主要封装的是js中DOM操作部分,使用和原生js一样
1.需要先引入页面才可以使用
代码引入:<script src='jquery.js'></script>
2.基本方法:
起点是从获取DOM元素开始
获取方法:$()
小括号里写:
id选择器 $("#id名")
class选择器 $(".class名")
元素选择器 $("标签名")
子级选择器 $("父级>子级")
后代选择器 $("父级 子级")
jquery封装的选择器
基本:
:even 偶数下标,奇数行
:odd 奇数下标,偶数行
:lt(index) 小于多少
:gt(index) 大于多少
:eq(index) 选择兄弟排名中的第几个
表单:
:text 找所有的type="text"的input标签
:radio type="radio"的单选按钮
:checkbox type="cheakbox"的多选按钮
:checked 被选中的
3.操作元素的内容,属性,样式
操作内容:
获取:
1.双标签:html()
2.input:val()
设置:
1.双标签:html('新内容')
2.input:val('新内容')
操作属性:
获取:attr('属性名')
设置:attr('属性名','新的值')
样式操作:
获取:css('样式名')
设置:css('样式名','新的值')
css({
"样式名1":"新的值",
"样式名2":"新的值"
})
额外封装的:
css操作类操作:
addClass():添加类名
removeClass():删除类名
toggleClass():切换类名
尺寸操作:
height():高度
width():宽度
scrollTop():滚动高度
scrollLeft():滚动距左边距离
4.绑定事件
$().事件名(function(){功能})
事件名:鼠标事件 键盘事件 表单事件
事件委托:$().on('事件名',#####'target',function(){功能})
额外:one():绑定的事件只会执行一次
5.DOM的增删查改
增:
创建元素:$('标签')
如:$("<li><div><p class='title'>"+new.title+"<img src="+new.url+"></div></li>)
添加到页面:
尾部添加:父级.append(子级)
子级.appendTo(父级)
指定位置添加:父级.prepend(子级)
子级:prependTo(父级)
删除:
empty():元素.empty()删除指定元素中所有子级元素
remove():元素.remove()指定的元素被删除
改:
replaceWith()
replaceAll()
查:
父级关系:parent()
祖先级关系:parents(val)
子级关系:children()
后代关系:find(val)这个里面必须有参数
兄弟关系:
上一个兄弟:prev()
上面所有的兄弟:prevall()
下一个兄弟:next()
下面所有的兄弟:nextall()
所有兄弟:siblings()
筛选:
eq()
first() 第一个
last() 最后一个
is() 验证作用
6.动画设置
显示与隐藏
show([speed,easing,function]) speed:毫秒单位的时间值
hide([speed,easing,function])
用法:元素.show()/元素.hide()
滑动
slideDown() 向下滑动,显示
slideUp() 向上滑动,隐藏
slideToggle() 滑动切换
stop()方法
停止所有在指定元素上正在运行的动画
stop(clearQueue,gotoEnd)
这个两个参数可选值是布尔值
stop(flase,flase):不请空动画队列,不立即跳到动画最后
stop(true,true):请空动画队列,立即跳到动画最后
stop(flase,true):不请空动画队列,立即跳到动画最后
stop(true,flase):请空动画队列,不立即跳到动画最后
淡入淡出
fadeIn() :淡入
fadeOut() :淡出
fadeToggle() :切换
fadeTo(opacity) :淡出到指定透明度 opacity[0-1]
index()方法
animate()
高级动画,animate(options,[speed,easing,fn])
options:可以动画的属性有哪些
不能动画:背景
几乎带px单位的都可以动画
接收参数时是字典形式的
animate({
width:40,
height:100
})
7.请求数据(前后台数据交互)
form表单
<form action='url' method='get/post'>
<input type='text'/>
<input type='password'/>
<input type='radio'/>
<input type='checkbox'/>
<textarea></textarea>
<input type='submit'/>
</form>
点击提交(type='submit')时,form表单会自动把name属性值作为键名,value属性值作为键值,组成键值对形式,然后form表单会按指定的method方式把数据发送到指定的URL路径去
method提交方式:
get:
数据会显示在地址栏,显示的形式是URL?数据,数据是键值对形式存在,多个键值对之间使用&符号连接
?最多出现一次,&可以出现多次
post:
数据不再地址栏里显示,可以在network监听工具里监听
在请求头中数据不会出现?和&符号
正常情况下是看不到这个数据的
ajax
jQuery中的ajax
$.ajax({
url:'地址',
type:'get/post',
data:{},
dataType:'json/jsonp',
success:function(res){
//请求成功,接收返回值
}
})
ajax不能跨域请求
两个网址:协议 主域号 端口号 完全相同时,这时两个网址完全相同
(任意其一不同,即为跨域请求)
解决跨域:
1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
2.cors:需要后台配合
3.后台设置允许所有或指定网址能直接访问
简写形式:
$.get(url,data,function(res){})
$.post(url,data,function(res){})
滚动
获取滚动高度:$(document).scrollTop()
获取页面高度:$(document).height()
可视窗口高度:$(window).height()
jQuery-语言基础整理的更多相关文章
- oc语言基础整理
objc.h---------------- typedef struct objc_class *Class; struct objc_object { Class isa OBJC_ISA_AV ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- JavaScript基础---语言基础(1)
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
- 《MSSQL2008技术内幕:T-SQL语言基础》读书笔记(下)
索引: 一.SQL Server的体系结构 二.查询 三.表表达式 四.集合运算 五.透视.逆透视及分组 六.数据修改 七.事务和并发 八.可编程对象 五.透视.逆透视及分组 5.1 透视 所谓透视( ...
- Object Pascal 语言基础
Delphi 是以Object Pascal 语言为基础的可视化开发工具,所以要学好Delphi,首先要掌握的就是Object Pascal 语言.Object Pascal语言是Pascal之父在1 ...
- MySQL基础整理(一)之SQL基础(未完成)
大家好,我是浅墨竹染,以下是MySQL基础整理(一)之SQL基础 1.SQL简介 SQL(Structure Query Language)是一种结构化查询语言,是使用关系模型的数据库应用语言. 2. ...
- D02-R语言基础学习
R语言基础学习——D02 20190423内容纲要: 1.前言 2.向量操作 (1)常规操作 (2)不定长向量计算 (3)序列 (4)向量的删除与保留 3.列表详解 (1)列表的索引 (2)列表得元素 ...
- D17——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...
- java学习第02天(语言基础组成:关键字、标识符、注释、常量和变量)
Java语言基础组成 1. 关键字 就是指的一些单词,这些单词被赋予了特殊的java含义,就不再叫单词了. 例如: class Demo{ public static void main(String ...
- day01<计算机基础知识&Java语言基础>
计算机基础知识(计算机概述) 计算机基础知识(软件开发和计算机语言概述) 计算机基础知识(人机交互) 计算机基础知识(键盘功能键和快捷键) 计算机基础知识(如何打开DOS控制台) 计算机基础知识(常见 ...
随机推荐
- 学习Vue第四节,v-model和双向数据绑定
Vue指令之v-model和双向数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- Node 内存泄漏排查案例
背景 在阿里云上看到我运行了一段时间的程序,发现 memory 一项基本是在稳步提升,就知道有内存泄漏的情况出现.如下图 近三日从 35% 升到 40%,缓慢而坚定的提升. 代码 排查此问题需要分析其 ...
- 常用linux命令学习记录
批量替换文件中字符串: sed -i "s/ITSApi/icallApi/g" `grep ITSApi -rl icallbiz` 解释: 将icallbiz目录文件中包涵的I ...
- Python+Typora博客图片上传
简介 用Typora 写Markdown 1年多了,这个编辑器的确很好用,但就是写完博客复制到博客园时要一个个手动插替换图片非常麻烦.后来发现最新版的Typora 已经支持图片上传功能,在 设置-图像 ...
- flink基础篇
Flink面试--核心概念和基础考察 1.简单介绍一下 Flink 2.Flink 相比传统的 Spark Streaming 有什么区别? 3.Flink 的组件栈有哪些? 面试知识 ...
- 一文讲透Cluster API的前世、今生与未来
作者:Luke Addison 原文链接:https://blog.jetstack.io/blog/cluster-api-past-present-and-future/ Cluster API是 ...
- Mysql 常用函数(13)- right 函数
Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html right 的作用 返回字符串 str 中最右边的 ...
- 关于jquery 项目中文件上传还有图片上传功能的尴尬???
做项目需要兼容IE8,所以找了好久,都没找到合适的希望有大神能够解惑!!! 要求是兼容IE8,在选完图片直接自动上传,有进度展示,并有成功的标记,下面的选择文件也是一个input file 选择完自动 ...
- vue组件中的“:”、“@”、“.”属性
冒号属性 :是指令 v-bind 的缩写,是为了动态绑定数据,用于响应式地更新 HTML 特性. 加了冒号,后面是变量或表达式:不加冒号的是字符串. 如图:将Home组件中的 probe-type 的 ...
- 如何使用Postman生成不同格式测试的报告
Postman还可以生成测试报告,还是多种格式报告? Postman团队开源Newman作为Postman运营工具,该开源库使用命令行方式执行Postman 脚本,并且生成多种格式报告,还支持Post ...