妈的今天就学jQuery了,我甚至还有些不明白,却不得不理解,希望通过这次的的整理,可以简单的解决一下自己的问题,首先我们的jQuery
概念,啥是JQuery呢?
JQ是一款轻量级的JS框架,类似于我们python中的模块,jq的核心只有几十kb,不会影响页面的加载,而且jq大大降低了开发的难度,且可以跨浏览器兼容.
JQuery
1.选择器
2.样式操作
3.文本操作
4.属性操作
5.文档处理
6.事件
7.动画效果
8.插件
9.each,data,Ajax
基础语法
$(selector).action()
基本选择器
$('#id') id选择器
$('tagName') 标签选择器
$('.className')类选择器
以及一些其他的选择器
以上是昨日学习的
今天学的主要还是表单的筛选器:
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button'
比如$(':checkbox'),这个可是比原生的js要简单了很多很多,完全符合作者说的writeless domore
其它还可以判断表单对象属性
enabled
disabled
checked
selected
举个栗子
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")这样就能找到enable的input标签了
还能通过selected寻找到被选中的选项
然后是next方法
$('#id').next()下一个
$('#id').nextAll() 下面全部的
$('#id').nextUntil("#i2")直到遇到id为i2的
prev同理
父亲元素似乎有一些微妙的不同
$("#id").parent()
$("#id").parents()查找全部父辈
$("#id").parentUntil()直到遇到()中的内容
儿子和兄弟元素
$("#id").children()
$("#id").sibling()
查找
$("div").filter(".c1")
样式操作
样式类
addclass();
removeClass();
hasClass();
toggleClass();
css操作
$("p").css("color", "red");
位置操作
offset() 设置元素在当前窗口的相对偏移
position() 设置匹配元素相对父元素的偏移
scrollTop() 顶部
scrollLeft() 左侧
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
设定尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
jq的特性就是如果没有赋值就是查看,赋值了就是改数据
可以设置html 文本text 值val 比纯粹的js少了inner
属性操作
同理文本操作
且prop可以获取属性
removeprop可以移除属性
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
$("#i1").attr("checked")
$("#i1").prop("checked")
如果用的是attr 显示的是undefined
而用prop显示的是false
那么问题已经很清楚了
attr这个属性显示的是状态
而prop显示的是是否存在
文档操作:
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
事件
又到事件了呢
和昨天一样,只不过不需要加on了
事件绑定方法也有
.on( events [, selector ],function(){})
阻止后续事件执行
如果不进行阻止的话,有时候一个事件会进入无限循环之中,比如button和alert加在一起就会导致无限循环
因此我们处理的方法有两种
一种是加一个returnfalse在alert后面来使其停下,
或者是通过 e.preventDefault();但是很少有人直到function还自带一个e参数
因此这里推荐使用第一个
阻止事件冒泡
几乎同理,但只有一个解决方案
那就是----使用e.stopPropagation()
很直白的英文propagation指的是传播,就是只要阻止了传播,就不会有冒泡问题了
页面载入
$(document).ready(function(){
// 在这里写你的JS代码...
})
也可以写成
$(function(){
// 你在这里写你的代码
})