jquery基础知识学习笔记

Posted 2020-07-07

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)取消绑定委托事件