首页 > 代码库 > 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基础知识学习笔记