妈的今天就学jQuery了,我甚至还有些不明白,却不得不理解,希望通过这次的的整理,可以简单的解决一下自己的问题,首先我们的jQuery

概念,啥是JQuery呢?

JQ是一款轻量级的JS框架,类似于我们python中的模块,jq的核心只有几十kb,不会影响页面的加载,而且jq大大降低了开发的难度,且可以跨浏览器兼容.

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(){
// 你在这里写你的代码
})

jq JQuery 基础语法 基本选择器 事件