首页 > 代码库 > jquery基础知识学习笔记
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)取消绑定委托事件
jquery基础知识学习笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。