jq 复习帖子 常用操作
1绝对定位(abs)与相对定位(relative)
区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把
其它的层遮罩住
绝对定位就是的参照位置就不像相对那样是自己了 至于是哪个 就看它的上级或上上级有没有定位了 也就是有没有position:relative
或position:fixed 等吧 当要绝对定位的层设好要参照位置的层后 就可以用top left这些来定位置了 如果它的上级或上上级都没定位的话就
会根据body的位置来定位了 还有最后一点绝对定位是不占位置的
ctrl + shift + delete 清除浏览器缓存
2项目开发中提交表单有以下三种方法:
第一种:用form自带属性action提交
第二种:用jquery提交:$("#formid").submit();
第三种:用ajax提交:
但如果form表单中数据很多时,不可能一一列出,只需要用$('#yourformid').serialize()就可以了
1解決jquery和其他库的冲突 可以将$(dom对象).ready(function(){ }) ready是入口函数 function是要执行的功能
jquery子选择器和后代选择器的区别:
①写法不一样:
后代选择器的标识为:空格
如:ul li{width:150px;} 【ul和li之间用空格隔开】
子选择器的标识为:>
如:ul>li{width:150px;}【ul和li之间用>隔开】
②功能不一样:
后代选择器是选择ul包围的 所以元素中的所有li元素,包括子元素、孙元素、曾孙元素等等等。
子选择器仅仅选择ul包围的 子元素中的 li元素,不包括孙元素、曾孙元素等等等。
③兼容性不一样:
后代选择器是所有浏览器都兼容的都可使用。
子选择器在IE6、IE7、IE8中则是不被支持的选择器,各自bug!
1基本过滤选择器:
:first 写法:$("p:first")第一个<p>元素
:last $("p:last")最后一个<p>元素
:even $("tr:even")所有偶数<tr>元素
:odd $("tr:odd")所有奇数<tr>元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index从0开始)
:gt(no) $("ul li:gt(3)") 列出index大于3的元素
:lt(no) $("ul li:lt(3)") 列出index小于3的元素
:not(selector) $("input:not(:empty)") 所有不为空的input元素
2可见性过滤选择器
:hidden $("p:hidden") 所有隐藏的<p>元素
:visible $("table:visible") 所有可见的表格
jquery操作网页
1显示或隐藏网页内容
语法:$(selector).show(speed,callback);//显示隐藏的函数
$(selector).hide(speed,callback);//隐藏函数
$(selector).toggle(speed,callback);//显示与隐藏能自动切换 不再是单一的切换显示
toggle()函数用于切换页面元素的可见状态
speed设置显示的速度 slow,fast或毫秒
callback设置动作完成后所执行的函数
实现灯幻式的淡入效果
fadeOut()淡出 fadeIn()淡入
页面的滑动隐藏
滑动隐藏效果通过'slideUp()'函数实现
滑动显示效果通过'slideDown()'函数实现
jQuery动画animate方法
语法:$(selector).animate({params},speed,callback);
必须的params参数定义形成动画的css属性。
可选的speed参数规定效果的时长 它可以取以下值:"slow","last"或毫秒.
可选的callback参数是动画完成之后所执行的函数名称.
jquery获取html
三个简单实用的用于dom操作的jQuery方法:
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括html标记 也就是html代码)
val()-设置或返回表单字段的值
label标签单独使用没有什么意义 要结合着input标签使用才有意义
等下设置一下jquery登录前端验证
获取当前元素的索引值
1 index()函数可获取当前元素的索引值
index()函数返回指定元素相对于其他指定元素的index位置 这些元素可通过
jquery选择器或dom元素来指定
插入节点元素
1 append()函数 (将新创建的节点元素插入到某个文档)
语法:$(selector).append(content);
(content参数表示要插入的内容 可包含html标签)
2 appendTo()函数在被选元素的结尾(仍然在内部)插入指定内容
语法:$(content).appendTo(selector);
(selector参数表示把内容追加到哪个元素上)
3 prepend()函数(将新创建的节点元素插入某个文档)
语法:$(selector).prepend(content);
4 prependTo()函数在被元素的结尾(仍然在内部)插入指定内容
语法:$(content).prependTo(selector)
5 after()函数在被选元素后插入指定的内容
语法:$(selector).after(content)
6 insertAfter()函数在被选元素之后插入HTML标记或已有的元素
语法:$(content).insertAfter(selector)
7 before()函数在被选元素之后插入html标记或者已有的元素
语法:$(selector).before(content)
8 insertBefore()函数在被选元素之前html标记或已有的元素
语法:$(content).insertBefore(selector);
复制节点元素
clone()函数可完成节点元素复制功能
$(this).clone(true).appendTo("ul")
可以往复制后的节点追加内容的添加
例如通过点击复制追加添加内容
替换节点元素
replaceWith()函数用指定的HTML内容或元素替换被选元素
$(selector).replaceWith(content)
删除节点元素
remove()函数移除被选元素 包括它所有的文本和子节点
empty()函数从被选元素移除所有内容 包括它所有的文本和子节点
$(selector).empty()//这样写就行
扩展点:$(selector).remove()与var $li=$(selector).remove() 写法上有什么区别吗?
jquery属性操作方法(DOM)
addClass() 向匹配的元素指定的类名
attr() 设置返回匹配元素的属性和值//通过匿名函数 function(){}来进行指定参数设置值
hasClass() 检查匹配的元素是否拥有指定的类
html() 设置或返回匹配的元素集合中的html内容
removeAttr() 从所有匹配的元素中移除指定的属性
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleclass() 从匹配的元素中添加或删除一个类
val() 设置或返回匹配元素的值
jquery css操作函数
css() 设置或返回匹配元素的样式属性
height() 设置或返回匹配元素的高度
offset() 返回第一个匹配元素相对于文档的位置
offsetParent() 返回最近的定位祖先元素
position() 返回第一个匹配元素相对于父元素的位置
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
scrollTop() 设置或返回元素相对滚动条顶部的偏移
width() 设置或返回匹配元素的宽度
parent().next():表示的是当前节点的父节点的下一个节点(下一个节点方的位置有什么特点)
用jquery做一个表单验证
1保证用户在表单输入合法数据
2减轻服务器的压力
如何做表单验证:
1获取相应表单标签的value属性 val()
2判断获取到的值是否符合要求
3验证的时机(局部验证 全局验证)
什么是正则表达式:
正则表达式是一种文本模式 包括普通字符(例如 a到 z 之间的字母)和特殊
字符(称为 “元字符”)
2正则表达式的用途?
测试字符串内的模式
替换文本
基于模式匹配从字符串中提取字符串
3声明正则表达式的方式、
直接使用双斜杠定义 : var reg=/ ^表达式 $ /;
new RegExp('表达式'):var reg=new RegExp("表达式");
正则表达式常用符号:
() 小括号里面的内容是一个整体
[ ] 匹配中括号的内容的任意一项
^ 匹配输入字符串开始处的位置 但在中括号表达式中使用的情况除外
在那种情况下它对字符集取反
{ } 标记限定符表达式的开始
| 指出在两个项之间进行选择
$ 匹配输入字符串结尾的位置
* 零次或多次匹配前面的字符或子表达式 0~n
+ 一次或多次匹配前面的字符或子表达式 1~n
\ 将下一个字符标记为一个特殊字符 或一个原义字符 或一个向后引用 或一个
八进制转义符
? 匹配前面的子表达式零次或一次 0~1
\d 匹配一个数字字符 [0~9]
\w 匹配包括下划线任何单词字符 等价于 "[A-Z a-z 0-9]" 常用
\W 匹配任何非单词字符 等价于 "[^A-Z a-z 0-9]". 常用
\n 匹配一个换行符 等价于\x0a和\cj
\b 匹配一个单词边界
\B 匹配非单词边界
空闲时间之余 强化下正则表达式的应用
1 什么是Ajax?
Ajax=异步javascript 和 xml ajax 是一种用于创建快速动态网页的而技术
关于jquery与 ajax
jquery提供多个与ajax有关的方法 通过jquery ajax 方法 你能够使用http get
http post从远程服务器上请求文本 html xml 或json 同时你能够把这些外部数据
直接载入网页被选元素中 如果没有jquery ajax编程是有些难度的
jquery中的load方法的理解$(选择器).load(url,data,callback)
url:你所要请求的地址
data:传输的数据
callback:加载完load函数之后所要执行的函数操作
2jquery ajax中的事件介绍:详情查看jquery ajax API文档
3在客户端和服务器端进行请求-响应的常用方法:
GET-从指定的资源请求数据:
语法:$.get(URL,callback);
$.get()的第一个参数是我们希望请求的url 第二个参数是回调函数。
第一个回调参数存有被请求页面的内容 第二个回调参数存有请求的状态.
POST-向指定的资源提交要处理的数据
语法: $.post(URL,data,callback);
$.post()的第一个参数是我们希望请求的url 第二个参数存有请求的状态(数据)
第三个参数是回调函数.
GET基本用于从服务器获得(取回)数据 GET方法可能返回缓存数据POST也可用于
从服务器获取数据 不过POST方法不会缓存数据 并且常用于连同请求一起发送数据
4ajax创建XMLHttpRequest对象
1 XMLHttpRequest是Ajax的基础
2 XMLHttpRequest用于在后台与服务器交换数据
3 创建XMLHttpRequest对象的语法:
variable=new XMLHttpRequest();
为了应对现在的一些新浏览器 要检查浏览器是否支持XMLHttpRequest
如果不支持就创建ActiveXObject.代码如下:
var xmlhttp;
if(window.XMLHttpRequest)
{//code for IE7+ Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}else
{//code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
原文:https://blog.csdn.net/tyhgfgh/article/details/53366752
jq 复习帖子 常用操作的更多相关文章
- 整理版jq 复习贴子
1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置 ...
- 【三】用Markdown写blog的常用操作
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- php模拟数据库常用操作效果
test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...
- Mac OS X常用操作入门指南
前两天入手一个Macbook air,在装软件过程中摸索了一些基本操作,现就常用操作进行总结, 1关于触控板: 按下(不区分左右) =鼠标左键 control+按下 ...
- mysql常用操作语句
mysql常用操作语句 1.mysql -u root -p 2.mysql -h localhost -u root -p database_name 2.列出数据库: 1.show datab ...
- nodejs配置及cmd常用操作
一.cmd常用操作 1.返回根目录cd\ 2.返回上层目录cd .. 3.查找当前目录下的所有文件dir 4.查找下层目录cd window 二.nodejs配置 Node.js安装包及源码下载地址为 ...
- Oracle常用操作——创建表空间、临时表空间、创建表分区、创建索引、锁表处理
摘要:Oracle数据库的库表常用操作:创建与添加表空间.临时表空间.创建表分区.创建索引.锁表处理 1.表空间 ■ 详细查看表空间使用状况,包括总大小,使用空间,使用率,剩余空间 --详细查看表空 ...
- python 异常处理、文件常用操作
异常处理 http://www.jb51.net/article/95033.htm 文件常用操作 http://www.jb51.net/article/92946.htm
- byte数据的常用操作函数[转发]
/// <summary> /// 本类提供了对byte数据的常用操作函数 /// </summary> public class ByteUtil { ','A','B',' ...
随机推荐
- Linux 在文档中查找满足条件的行并输出到文件:
Linux 在文档中查找满足条件的行并输出到文件: 文件名称: dlog.log 输出文件: out.log 1.满足一个条件(包含 “TJ” )的语句: grep “TJ” dlog. ...
- 创建Java程序并设置快捷提示
1.new Java project 创建项目 2.new package 创建包,cn.com.test 3.创建Java文件 4.Java智能提示的设置 window/preference 在Au ...
- fork、vfork、clone
三个都是用来创建新进程的函数 fork 概念 1)fork函数调用一次会返回两次,给父进程返回子进程的进程ID,给子进程返回0(这么设计的原因:父进程可以有很多子进程,没有一个函数可以让父进程知道所有 ...
- nullptr(c++11)
1.概念 用字面值常量nullptr来初始化或赋值来得到空指针 2.c++11之前使用NULL或0 1)NULL是一个宏定义(预处理变量),定义在cstdlib中,其值就是0:对于预处理变量,预处理器 ...
- Mybatis-Plus 实战完整学习笔记(八)------delete测试
1.根据ID删除一个员工deleteById /** * 删除客户 * * @throws SQLException */ @Test public void deletedMethod() thro ...
- 微信小程序的新的
app.request.get('http://ele.kassing.cn/v1/pois',this.data.city).then(res=>{ console.log(res) this ...
- Redis集群的主从切换研究
目录 目录 1 1. 前言 1 2. slave发起选举 2 3. master响应选举 5 4. 选举示例 5 5. 哈希槽传播方式 6 6. 一次主从切换记录1 6 6.1. 相关参数 6 6.2 ...
- leaflet入门(四)API翻译(上)
L.Map L.Marker L.Popup L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div元素和带有地图选项的描述的文字对象来实 ...
- redis状态监控可视化工具RedisLive使用
首先,别人写的工具,赞一下 github地址 https://github.com/nkrode/RedisLive 然后,fork一下,自己加点功能 gui介绍(直接copy的github图片) ...
- 在Echarts 柱形图的单击事件中写入自定义的参数
标签: 逻辑:(点击柱形图的某个实例(注意:三个柱子表示的是一个实例)) 参考链接:http://echarts.baidu.com/doc/example/event.html { name: ‘c ...