jquery基础知识学习笔记

jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途

做产品的时候是用它的min版本。玩jquery的时候，不管干啥都要花钱(美元)

注意点：

1.silbings('input');除了发生事件的那个元素的其他同级input兄弟元素 注意silblings要加上s

2.jquery无法获取当前时间

3.jquery对象和js对象混合操作的问题（阅读书籍解决）

4.innerHTML=html(内容);

5.is(":checked")是jq的方法判断元素是否被选择，返回布尔值

6.jq没有定时器，只能写原生

7.bind是绑定事件unbind是的解除绑定事件,一般上都是用不上的，因为，jq默认所有的事件都是绑定的状态,一般都用on代替的，因为on有事件委托的功能

8.parent()查找结构父级元素 offsetParent()定位父级

9.css('',value)一定要加引号

10.$('img').size();计算文档中所有图片的数量

11.一个元素绑定多个事件和多个函数

$('#div1').on({'mouseover':function(){

},'mousemove':function(){

}});

12.清空一个事件用off();

13.jquery的阻止默认事件的方法

return false

ev.preventDefault()

14.$(this).find('span') 找到this下面的span

.click(fn);

.mouseover(fn);

.mouseout(fn);

.hover(fn1,fn2);

.toggle(fn1,fn2,fn3.....);

效果：

.hide(); 隐藏

.show(); 显示

.animate({name:value,name:value});

**前面必须加上stop()

非常重要的：jquery和DOM对象的转换

原生对象-》jquery对象

obj==>$(obj)

jquery对象-》原生对象

$('div')[下标]

$().get(下标)

jquery中的循环：

jquery的循环

$('div').each(function(index,element){

index 下标

element 每个原生对象

this 每个原生对象

});

事件里面this 原生

each里面this 原生

jquery中所有的this都是原生的。

但是有唯一的例外,插件中的this是jquery对象

插件

1.

$.fn.函数名=function(){};

2.

$.fn.extend({

函数name1:function(){},

函数name2:function(){},

函数name3:function(){}

});

例子：

'use strict'

$.fn.extend({

cs:function(sName,sValue){

//插件中的this是jquery对象

this.css(sName,sValue);

}

});

★号是目前已经确定比较重要的知识点

页面载入：用第一种是公司必须用的请记住

★1.$(document).ready.$(function(){}); 这是主流常用的

2.$(function(){});

索引值：

$('div').eq($(this).index())

选择器：主要核心是和css的选择器相同

==元素选择==

★$('#id') id选择器

★$('.class') class选择器

$('tagName') 标签选择器

==层级选择==

★$("div,span,p.myClass") 和选择

$('#box ol .active input');层级选择器（找到什么下面的什么元素）

==同级选择==

$("form > input") 匹配form中所有的子级input元素。

$("label + input") 匹配所有跟在 label 后面的 input 元素

$("form ~ input") 找到所有与表单同级的 input 元素

==伪类选择==

★$("li:eq(index)") index是下标

$('li:first'); 获取匹配的第一个元素

$('li:last'); 获取匹配的最后一个元素

$("input:not(:checked)") 查找所有未选中的 input 元素

$("li:even") 选择奇数行

$('li:odd') 选择偶数行

$(":header").css("background", "#EEE"); 给页面内所有标题加上背景色

$("#login:focus"); 页面加载后id为login 的设置焦点

$("div:has(p)").addClass("test"); 给所有包含 p 元素的 div 元素添加一个 text 类

==属性选择器==

$("input[name='newsletter']").attr("checked", true);查找所有 name 属性是 newsletter 的 input 元素

操作css

.css(name); 获取

.css(name,value); 修改一个

.css({name:value,name:value}); 批量修改

操作属性

.attr(name); 获取

.attr(name,value); 修改一个

.attr({name:value,name:value}); 批量修改

$("img").removeAttr("src"); 要删除的属性名

禁用和选中所有页面上的复选框。

$("input[type='checkbox']").prop("disabled", false);

$("input[type='checkbox']").prop("checked", true);

操作class

.addClass()

.removeClass()

$("p").removeClass("selected");从匹配的元素中删除 'selected' 类

操作内容

表单元素(相当于是value)

.val() 获取

.val('a') 设置

.val('') 清空

非表单元素（相当于innerHTML）

.html() 获取

.html('a') 设置

.html('') 清空

DOM操作：

创建元素：

$('<div>创建了一个div标签</div>')

2.插入元素

appendTo 内部后面

$('<div><strong>abc</strong></div>').appendTo($('div'));

prependTo 内部前面

insertAfter 外部后面

insertBefore 外部前面

3.删除元素

$().remove();

$("p").detach();从DOM中把所有段落删除

4.获取父节点

$().parent(); 找结构父级

$().offsetParent(); 找定位父级

5.克隆

$("b").clone().prependTo("p");克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中

6.获取位置 js jquery

定位父级位置 offset position注意，要定位

绝对位置 getPos offset 绝对位置

7.获取尺寸

width()/height() 单纯的宽高

innerWidth()/innerHeight() 宽高+padding

outerWidth()/outerHeight() 盒子模型的宽高

事件ev：jquery中的ev已经是兼容后的

事件绑定

*jquery中所有的事件都是默认绑定上去的。

bind 事件都是绑定好的所以用处不大

unbind

事件委托：

on('事件名'，fn)委托绑定事件

off('事件名'，fn)取消绑定委托事件