整理版jq 复习贴子

Posted 2021-02-14 baili-luoyun

1绝对定位(abs)与相对定位(relative)

区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置就不像相对那样是自己了 至于是哪个 就看它的上级或上上级有没有定位了 也就是有没有position:relative 或position:fixed 等吧 当要绝对定位的层设好要参照位置的层后 就可以用top left这些来定位置了 如果它的上级或上上级都没定位的话就 会根据body的位置来定位了 还有最后一点绝对定位是不占位置的 ctrl + shift + delete 清除浏览器缓存

 

 

2项目开发中提交表单有以下三种方法:

第一种：用form自带属性action提交

第二种：用jquery提交：$("#formid").submit();

第三种：用ajax提交：

3接收表单数据

但如果form表单中数据很多时，不可能一一列出，只需要用$(‘#yourformid‘).serialize()就可以了

 

jq笔记

载入 相当于onload

jq 选择器

jq 子选择和后代选择器的区别

1 写法不样

后代选择器的标识为：空格 如：ul li{width:150px;} 【ul和li之间用空格隔开】 子选择器的标识为：> 如：ul>li{width:150px;}【ul和li之间用>隔开】

 

2 功能不一样

后代选择器是选择ul包围的 所以元素中的所有li元素，包括子元素、孙元素、曾孙元素等等等。 子选择器仅仅选择ul包围的 子元素中的 li元素，不包括孙元素、曾孙元素等等等。

3 兼容性不一样

后代选择器是所有浏览器都兼容的都可使用。 子选择器在IE6、IE7、IE8中则是不被支持的选择器，各自bug！

jq 过滤选择器

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") 所有可见的表格

3 关系选择器

1 prev()

 

选择前面的紧挨的同辈元素

2 prevall()

 

选择前面的所有的同辈元素

3 next()

选择box 的后面的同辈元素

4 nextall()

选择box 的所有的后面元素

5 parent()

选择box 的父元素

6 children()

选择box 的所有子元素

7 siblings()

选择box的同级元素

8 find()

搜索某个元素的所有的子孙元素

 

jq实现操作网页

1 显示或隐藏网页内容

语法:$(selector).show(speed,callback);//显示隐藏的函数 $(selector).hide(speed,callback);//隐藏函数 $(selector).toggle(speed,callback);//显示与隐藏能自动切换 不再是单一的切换显示 toggle()函数用于切换页面元素的可见状态 speed设置显示的速度 slow,fast或毫秒 callback设置动作完成后所执行的函数

2实现幻灯片式淡入淡出

fadeOut()淡出 fadeIn()淡入

3页面滑动隐藏

** 滑动隐藏效果通过‘slideUp()‘函数实现** 滑动显示效果通过‘slideDown()‘函数实现

 

 

jq 动画animate 方法

基本语法

语法:$(selector).animate({params},speed,callback); 必须的params参数定义形成动画的css属性。 可选的speed参数规定效果的时长 它可以取以下值:"slow","last"或毫秒. 可选的callback参数是动画完成之后所执行的函数名称.

jq 进行获取html 操作

三个简单的用于dom操作的jq 方法

1 text()

text()-设置或返回所选元素的文本内容

2 html()

设置或返回所选元素的内容(包括html标记 也就是html代码)

3 val()

设置或返回表单字段的值

label 的使用

label标签单独使用没有什么意义 要结合着input标签使用才有意义

 

获取当前元素的索引

1 index()函数可获取当前元素的索引值 index()函数返回指定元素相对于其他指定元素的index位置 这些元素可通过 jquery选择器或dom元素来指定

插入节点元素

1 append() 函数

1 append()函数 (将新创建的节点元素插入到某个文档) 语法:$(selector).append(content); (content参数表示要插入的内容 可包含html标签)

2 appendTo() 函数

2 appendTo()函数在被选元素的结尾(仍然在内部)插入指定内容 语法:$(content).appendTo(selector); (selector参数表示把内容追加到哪个元素上)

3 prepend()

3 prepend()函数(将新创建的节点元素插入某个文档) 语法:$(selector).prepend(content);

 

4 prependTo()

4 prependTo()函数在被元素的结尾(仍然在内部)插入指定内容 语法:$(content).prependTo(selector)

5 after()

5 after()函数在被选元素后插入指定的内容 语法:$(selector).after(content)

6 insertAfter()

6 insertAfter()函数在被选元素之后插入HTML标记或已有的元素 语法:$(content).insertAfter(selector)

 

7 before()

7 before()函数在被选元素之后插入html标记或者已有的元素 语法:$(selector).before(content)

8 insertBefore()

8 insertBefore()函数在被选元素之前html标记或已有的元素 语法:$(content).insertBefore(selector);

复制节点元素

clone()函数可完成节点元素复制功能 $(this).clone(true).appendTo("ul") 可以往复制后的节点追加内容的添加 例如通过点击复制追加添加内容

替换节点元素

replaceWith()函数用指定的HTML内容或元素替换被选元素 $(selector).replaceWith(content)

删除节点元素

remove()函数移除被选元素 包括它所有的文本和子节点 empty()函数从被选元素移除所有内容 包括它所有的文本和子节点 $(selector).empty()//这样写就行

jq 常见dom 操作 方法

1 addclass()

addClass() 向匹配的元素指定的类名

2 attr()

attr() 设置返回匹配元素的属性和值//通过匿名函数 function(){}来进行指定参数设置值

3 hasclass()

hasClass() 检查匹配的元素是否拥有指定的类

 

4 html()

html() 设置或返回匹配的元素集合中的html内容

5 removeattr()

removeAttr() 从所有匹配的元素中移除指定的属性

 

6 removeclass()

removeClass() 从所有匹配的元素中删除全部或者指定的类

7 toggleclass()

toggleclass() 从匹配的元素中添加或删除一个类

8 val()

val() 设置或返回匹配元素的值input 标签

jq 操作css 常用函数

1 css()

css() 设置或返回匹配元素的样式属性

2 height()

height() 设置或返回匹配元素的高度

3 offset()

offset() 返回第一个匹配元素相对于文档的位置

4 offsetParent()

返回最近的定位祖先元素

5 position()

position() 返回第一个匹配元素相对于父元素的位置

6 width()

width() 设置或返回匹配元素的宽度

 

1绝对定位(abs)与相对定位(relative)

区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置就不像相对那样是自己了 至于是哪个 就看它的上级或上上级有没有定位了 也就是有没有position:relative 或position:fixed 等吧 当要绝对定位的层设好要参照位置的层后 就可以用top left这些来定位置了 如果它的上级或上上级都没定位的话就 会根据body的位置来定位了 还有最后一点绝对定位是不占位置的 ctrl + shift + delete 清除浏览器缓存

 

 

2项目开发中提交表单有以下三种方法:

第一种：用form自带属性action提交

第二种：用jquery提交：$("#formid").submit();

第三种：用ajax提交：

3接收表单数据

但如果form表单中数据很多时，不可能一一列出，只需要用$(‘#yourformid‘).serialize()就可以了

 

jq笔记

载入 相当于onload

jq 选择器

jq 子选择和后代选择器的区别

1 写法不样

后代选择器的标识为：空格 如：ul li{width:150px;} 【ul和li之间用空格隔开】 子选择器的标识为：> 如：ul>li{width:150px;}【ul和li之间用>隔开】

 

2 功能不一样

后代选择器是选择ul包围的 所以元素中的所有li元素，包括子元素、孙元素、曾孙元素等等等。 子选择器仅仅选择ul包围的 子元素中的 li元素，不包括孙元素、曾孙元素等等等。

3 兼容性不一样

后代选择器是所有浏览器都兼容的都可使用。 子选择器在IE6、IE7、IE8中则是不被支持的选择器，各自bug！

jq 过滤选择器

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") 所有可见的表格

3 关系选择器

1 prev()

 

选择前面的紧挨的同辈元素

2 prevall()

 

选择前面的所有的同辈元素

3 next()

选择box 的后面的同辈元素

4 nextall()

选择box 的所有的后面元素

5 parent()

选择box 的父元素

6 children()

选择box 的所有子元素

7 siblings()

选择box的同级元素

8 find()

搜索某个元素的所有的子孙元素

 

jq实现操作网页

1 显示或隐藏网页内容

语法:$(selector).show(speed,callback);//显示隐藏的函数 $(selector).hide(speed,callback);//隐藏函数 $(selector).toggle(speed,callback);//显示与隐藏能自动切换 不再是单一的切换显示 toggle()函数用于切换页面元素的可见状态 speed设置显示的速度 slow,fast或毫秒 callback设置动作完成后所执行的函数

2实现幻灯片式淡入淡出

fadeOut()淡出 fadeIn()淡入

3页面滑动隐藏

** 滑动隐藏效果通过‘slideUp()‘函数实现** 滑动显示效果通过‘slideDown()‘函数实现

 

 

jq 动画animate 方法

基本语法

语法:$(selector).animate({params},speed,callback); 必须的params参数定义形成动画的css属性。 可选的speed参数规定效果的时长 它可以取以下值:"slow","last"或毫秒. 可选的callback参数是动画完成之后所执行的函数名称.

jq 进行获取html 操作

三个简单的用于dom操作的jq 方法

1 text()

text()-设置或返回所选元素的文本内容

2 html()

设置或返回所选元素的内容(包括html标记 也就是html代码)

3 val()

设置或返回表单字段的值

label 的使用

label标签单独使用没有什么意义 要结合着input标签使用才有意义

 

获取当前元素的索引

1 index()函数可获取当前元素的索引值 index()函数返回指定元素相对于其他指定元素的index位置 这些元素可通过 jquery选择器或dom元素来指定

插入节点元素

1 append() 函数

1 append()函数 (将新创建的节点元素插入到某个文档) 语法:$(selector).append(content); (content参数表示要插入的内容 可包含html标签)

2 appendTo() 函数

2 appendTo()函数在被选元素的结尾(仍然在内部)插入指定内容 语法:$(content).appendTo(selector); (selector参数表示把内容追加到哪个元素上)

3 prepend()

3 prepend()函数(将新创建的节点元素插入某个文档) 语法:$(selector).prepend(content);

 

4 prependTo()

4 prependTo()函数在被元素的结尾(仍然在内部)插入指定内容 语法:$(content).prependTo(selector)

5 after()

5 after()函数在被选元素后插入指定的内容 语法:$(selector).after(content)

6 insertAfter()

6 insertAfter()函数在被选元素之后插入HTML标记或已有的元素 语法:$(content).insertAfter(selector)

 

7 before()

7 before()函数在被选元素之后插入html标记或者已有的元素 语法:$(selector).before(content)

8 insertBefore()

8 insertBefore()函数在被选元素之前html标记或已有的元素 语法:$(content).insertBefore(selector);

复制节点元素

clone()函数可完成节点元素复制功能 $(this).clone(true).appendTo("ul") 可以往复制后的节点追加内容的添加 例如通过点击复制追加添加内容

替换节点元素

replaceWith()函数用指定的HTML内容或元素替换被选元素 $(selector).replaceWith(content)

删除节点元素

remove()函数移除被选元素 包括它所有的文本和子节点 empty()函数从被选元素移除所有内容 包括它所有的文本和子节点 $(selector).empty()//这样写就行

jq 常见dom 操作 方法

1 addclass()

addClass() 向匹配的元素指定的类名

2 attr()

attr() 设置返回匹配元素的属性和值//通过匿名函数 function(){}来进行指定参数设置值

3 hasclass()

hasClass() 检查匹配的元素是否拥有指定的类

 

4 html()

html() 设置或返回匹配的元素集合中的html内容

5 removeattr()

removeAttr() 从所有匹配的元素中移除指定的属性

 

6 removeclass()

removeClass() 从所有匹配的元素中删除全部或者指定的类

7 toggleclass()

toggleclass() 从匹配的元素中添加或删除一个类

8 val()

val() 设置或返回匹配元素的值input 标签

jq 操作css 常用函数

1 css()

css() 设置或返回匹配元素的样式属性

2 height()

height() 设置或返回匹配元素的高度

3 offset()

offset() 返回第一个匹配元素相对于文档的位置

4 offsetParent()

返回最近的定位祖先元素

5 position()

position() 返回第一个匹配元素相对于父元素的位置

6 width()

width() 设置或返回匹配元素的宽度