JQuery使用及基础原理解析相关笔记(一)

1.jquery

◆很强大,但是很臃肿,需要自己封装一个jquery,要用到jqery中哪些方法,就把原来jquery中的方法拿出来。

◆jquery有两大特点:链式编程、隐式迭代(遍历)。


2.原生js的入口函数与jquery的入口函数

◆原生js的入口函数:

window.onload = function () {}

是页面文档和页面资源都加载完毕之后开始执行函数里面的代码,

document.onready =function () {}

是页面文档加载完毕之后开始执行函数里面的代码(但是这个原生的js的入口函数是jquery脚本库扩展出来的事件,只有在引入了jquery脚本库的时候才能够使用document.onready,没有引入脚本库的时候document对象是没有这个事件的),document.onready 比 window.onload要快一点,因为图片资源还没有显示,document.onready里的代码就执行了,window.onload是页面所有资源都加载完毕才执行的,window对象没有onready。

◆jquery的入口函数:

$(document).ready(function () {});
$(function () {});
$(window).ready(function () {});
这三种方式都和document.onready一样,都是页面文档加载完毕之后 就进入JQuery的入口函数开始执行函数里面的代码,

$(window).load(function () {});

这种方式和

window.onload=function(){}

一样,都是页面文档和页面资源都加载完毕之后开始执行函数里面的代码。




    
    JQuery的入口函数与原生js的入口函数
    






3.Query与$的区别:其实它们是一样的,都是一个函数名,并且它们完全相等,jQuery===$。




    
    JQuery与$的区别(其实他们是一样的)
    
    




4.jQuery中的dom对象与原生js中的dom对象的区别

◆jQuery的dom对象是对js的dom对象的封装
◆jQuery无论是通过什么方式获取的dom对象都是伪数组,伪数组中装的成员就是原生js的dom对象。
◆不光是将原生js的dom对象封装到数组中,并且还给这个数组增加了很多功能方法,也就是给原来的js的dom对象穿上了一层带有功能的皮肤,虽然原生的js的dom对象也可以自己封装这些功能方法,但是兼容性没有jQuery的那么好。
★模拟jQuery对象操作css样式的功能方法

 Object.prototype.css = function (json) {
        var cssArr = [];
        for (var key in json) {
            cssArr.push(key + ":" + json[key]);
        }
        this.style.cssText = cssArr.join(";");
    }
    box.css({width: "200px", height: "200px", "background-color": "#f00"});

★jquery与js操作样式的方式




    
    jquery与js操作样式的方式
    


◆jQuery中的Dom对象与js中的Dom对象的区别和联系




    
    jQuery中的Dom对象与js中的Dom对象的区别和联系
    



5.原生的js的dom对象可以和jQuery的dom对象相互转换

◆js的dom对象转换为jQuery的dom对象:$(js的dom对象)或jQuery(js的dom对象)。

◆jQuery的dom对象转换为js的dom对象:jQuery的dom对象[index]或jQuery的dom对象.get(index),就可以获取jQuery的dom对象的伪数组中的一个dom对象,但是如果get方法中不写索引就可以获取jQuery的dom对象的伪数组中的所有的dom对象,jQuery的dom对象.get()获取一个正常的原生js的dom对象的数组,不再是伪装数组。




    
    jQuery的dom对象与js的dom对象之间相互转换
    



6.jQuery中的伪数组是怎么实现的,清空原本数组中的原型(所有功能方法),添加自己新增的功能方法,添加索引为字符串的成员context




    
    jQuery对象是这样的伪数组





7.简单使用jQuery:隔行变色、页面开关灯

◆隔行变色




    
    使用jQuery进行隔行变色
    

    


  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色
  • 使用jQuery进行隔行变色

◆页面开关灯




    
    使用jQuery进行页面开关灯
    
    
    







8.jQuery的基本选择器:

◆无论什么选择器,返回的都是封装着原生的dom对象的伪数组。

◆$(id选择器),$(element选择器),$(class选择器),$(*通配符选择器),$(选择器1,选择器2,选择器3,选择器4)....$(css选择器),其实在css中使用的选择器,都可以放到$()中作为选择器

$("li")
$(".li")
$("*")
$("li,.li,#li,*")



    
    基本选择器
    



9.jQuery的层级选择器:

◆$(祖 子)后代选择器,$(父>子)子代选择器,$(前+紧接着的后)后兄弟选择器,$(前~所有的后)后同辈选择器,其实在css中使用的选择器,都可以放到$()中作为选择器

$("ul li")
$("ul>li")
$("#prv+ol")
$("#prv~li")



    
    层级选择器
    
    



10.jQuery的基本过滤选择器

◆在基本选择器的基础上进行过滤操作:如$("li:first");,找到所有li后直接找到第一个li。

:first过滤第一个、

:not(selector)过滤不包含selector的、

:even过滤索引为偶数的、

:odd过滤索引为奇数的、

:eq(index)过滤索引等于index的、

:gt(index)过滤索引大于index的、

:last过滤最后一个、

:lt(index)过滤索引小于index的、

:header过滤h1-h6、

:animated过滤正在执行动画的、

:focus过滤已经获取焦点。


11.jQuery的筛选选择器

 ◆ 筛选过滤选择器操作:如$("li").eq(0);和$("li:even").eq(0);,前者表示找到所有li后过滤第一个li,后者表示找到所有索引为偶数的li后过滤第一个。

//    eq(index | -index) //等于索引的元素
//    first() //第一个元素
//    last() //最后一个元素
//    hasClass(class) //是否包含类
//    filter(expr | obj | ele | fn)
//    is(expr | obj | ele | fn)
//    map(callback)
//    has(expr | ele)
//    not(expr | ele | fn) 是否不包含
//    slice(start, [end])

    ◆筛选查找选择器操作:如$("li").eq(0).next();或者$("li:first").next();,都是找到第一个li然后在此基础上查找下一个。

//    children([expr]) //找子代
//    closest(e | o | e)1.7 *
//    find(e | o | e)//从jquery对象的后代中查找必须制定参数,如果不指定获取不到元素
//    next([expr])//下一个
//    nextall([expr])//下面的全部
//    nextUntil([e | e][, f])
//    offsetParent() //带有定位的父节点
//    parent([expr]) //父节点
//    parents([expr])
//    parentsUntil([e | e][, f])
//    prev([expr]) //上一个
//    prevall([expr]) //上面的全部
//    prevUntil([e | e][, f])
//    siblings([expr]) //所有兄弟 除了自己

 

12.使用JQuery的选择器来DIY动画效果:下拉菜单、隔行变色、高亮显示戏曲牌、手风琴折叠面板、服饰广告

◆下拉菜单




    
    使用jQuery的选择器制作下拉菜单
    
    
    





◆隔行变色




    
    使用jQuery的选择器制作-隔行变色


  • 使用jQuery的选择器制作-隔行变色
  • 使用jQuery的选择器制作-隔行变色
  • 使用jQuery的选择器制作-隔行变色
  • 使用jQuery的选择器制作-隔行变色
  • 使用jQuery的选择器制作-隔行变色

◆高亮显示戏曲牌




    
    使用jQuery的选择器制作-高亮显示戏曲牌
    
    
    


◆手风琴折叠面板




    
    使用jQuery的选择器制作-手风琴折叠面板
    
    
    



◆服饰广告




    
    使用jQuery的选择器制作-淘宝精品服饰广告
    
    
    






转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247733.html

你可能感兴趣的:(JQuery使用及基础原理解析相关笔记(一))