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-语言基础整理的更多相关文章

  1. oc语言基础整理

    objc.h---------------- typedef struct objc_class *Class; struct objc_object { Class isa  OBJC_ISA_AV ...

  2. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  3. JavaScript基础---语言基础(1)

    写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

  4. 《MSSQL2008技术内幕:T-SQL语言基础》读书笔记(下)

    索引: 一.SQL Server的体系结构 二.查询 三.表表达式 四.集合运算 五.透视.逆透视及分组 六.数据修改 七.事务和并发 八.可编程对象 五.透视.逆透视及分组 5.1 透视 所谓透视( ...

  5. Object Pascal 语言基础

    Delphi 是以Object Pascal 语言为基础的可视化开发工具,所以要学好Delphi,首先要掌握的就是Object Pascal 语言.Object Pascal语言是Pascal之父在1 ...

  6. MySQL基础整理(一)之SQL基础(未完成)

    大家好,我是浅墨竹染,以下是MySQL基础整理(一)之SQL基础 1.SQL简介 SQL(Structure Query Language)是一种结构化查询语言,是使用关系模型的数据库应用语言. 2. ...

  7. D02-R语言基础学习

    R语言基础学习——D02 20190423内容纲要: 1.前言 2.向量操作 (1)常规操作 (2)不定长向量计算 (3)序列 (4)向量的删除与保留 3.列表详解 (1)列表的索引 (2)列表得元素 ...

  8. D17——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...

  9. java学习第02天(语言基础组成:关键字、标识符、注释、常量和变量)

    Java语言基础组成 1. 关键字 就是指的一些单词,这些单词被赋予了特殊的java含义,就不再叫单词了. 例如: class Demo{ public static void main(String ...

  10. day01<计算机基础知识&Java语言基础>

    计算机基础知识(计算机概述) 计算机基础知识(软件开发和计算机语言概述) 计算机基础知识(人机交互) 计算机基础知识(键盘功能键和快捷键) 计算机基础知识(如何打开DOS控制台) 计算机基础知识(常见 ...

随机推荐

  1. 学习Vue第四节,v-model和双向数据绑定

    Vue指令之v-model和双向数据绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  2. Node 内存泄漏排查案例

    背景 在阿里云上看到我运行了一段时间的程序,发现 memory 一项基本是在稳步提升,就知道有内存泄漏的情况出现.如下图 近三日从 35% 升到 40%,缓慢而坚定的提升. 代码 排查此问题需要分析其 ...

  3. 常用linux命令学习记录

    批量替换文件中字符串: sed -i "s/ITSApi/icallApi/g" `grep ITSApi -rl icallbiz` 解释: 将icallbiz目录文件中包涵的I ...

  4. Python+Typora博客图片上传

    简介 用Typora 写Markdown 1年多了,这个编辑器的确很好用,但就是写完博客复制到博客园时要一个个手动插替换图片非常麻烦.后来发现最新版的Typora 已经支持图片上传功能,在 设置-图像 ...

  5. flink基础篇

    Flink面试--核心概念和基础考察 1.简单介绍一下 Flink 2.Flink 相比传统的 Spark Streaming 有什么区别? 3.Flink 的组件栈有哪些?         面试知识 ...

  6. 一文讲透Cluster API的前世、今生与未来

    作者:Luke Addison 原文链接:https://blog.jetstack.io/blog/cluster-api-past-present-and-future/ Cluster API是 ...

  7. Mysql 常用函数(13)- right 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html right 的作用 返回字符串 str 中最右边的 ...

  8. 关于jquery 项目中文件上传还有图片上传功能的尴尬???

    做项目需要兼容IE8,所以找了好久,都没找到合适的希望有大神能够解惑!!! 要求是兼容IE8,在选完图片直接自动上传,有进度展示,并有成功的标记,下面的选择文件也是一个input file 选择完自动 ...

  9. vue组件中的“:”、“@”、“.”属性

    冒号属性 :是指令 v-bind 的缩写,是为了动态绑定数据,用于响应式地更新 HTML 特性. 加了冒号,后面是变量或表达式:不加冒号的是字符串. 如图:将Home组件中的 probe-type 的 ...

  10. 如何使用Postman生成不同格式测试的报告

    Postman还可以生成测试报告,还是多种格式报告? Postman团队开源Newman作为Postman运营工具,该开源库使用命令行方式执行Postman 脚本,并且生成多种格式报告,还支持Post ...