JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)

目录

一.JQuery了解

1,原生js的问题

         2. JQuery简单介绍

2.1 官方自我介绍:

 2.2 引入JQuery

 二 .JQuery 对象 和 DOM 对象

1.DOM

1.1 DOM 模型

1.2 DOM 节点 

1.3 DOM 对象

 2. JQuery对象

 3. JQuery对象和DOM对象的相互转换

 3.1 DOM 对象转化JQuery对象

3.2  JQuery对象转化DOM 对象

三.$()选择器

1.$()选择的结果是一个类数组

2.使用方法(引号问题)

3.文档加载

 3.1 window.onload()函数和$(document).ready()函数的对比

四. 选择器

1. 基本选择器

1.1 标签选择器

1.2 类选择器

1.3 id选择器

1.4 并集(或)选择器 

1.5 交集选择器（同时存在）

1.6 全局选择器：选中全部的元素

2.层次选择器

2.1 相邻选择器+

2.2 同辈选择器 ~

2.3 后代选择器 空格

2.4 后代选择器 > 

3.属性选择器

4. 过滤选择器

5.可见性选择器

6.is()

五. 序与迭代

1.序号eq()

2.index()方法

3.each() 方法

4.size()方法和length属性

5. get()方法

六. css样式

1. 读取样式值

         2. 设置属性值

2.1 设置一个属性值

2.2 设置多个属性值

2.3 设置的属性可以多样

3. 自定义属性

3.1 获取自定义属性

3.2 设置自定义属性

4. 有关于class类名

4.1 添加类名 addClass()

4.2 删除类名 removeClass()

4.3 替换类名 toggleClass()

5. 关于节点值

5.1 html()

5.2 text()

七. 节点关系

1. children()

2. find()

3. parent()

4. parents()

5. silbling()

6. prev() next() prevAll() nextAll()

7. offsetParent()

---

JQuery学习笔记二(节点操作,事件监听,动画相关方法)

一.JQuery了解

1,原生js的问题

在我们变成的时候回很容易发现,原生的js编程会有很多的问题,尤其是在兼容性方面:

1. 选择元素,权限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容问题

2. 样式操作也有兼容问题,还得我们自己封装，封装getStyle（）

3. 动画也麻烦,也得自己封装，封装animation（）

4. HTML节点操作也挺麻烦的

JS里面麻烦的都是和DOM编程有关的,有兼容问题,还的我们自己封装.

jQuery是原生JS封装的,简化了JS的DOM编程，完美的解决了原生js在DOM操作上的难题

2. JQuery简单介绍

2.1 官方自我介绍:

jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。

版本线:

1.x版本

2.x版本

3.x版本

 

jQuery分压缩版和未压缩版 ,以下面的两个版本为例:

• jquery-3.3.1.min.js ：压缩版，发布版84.8KB
• jquery-3.3.1.js ：常规版，开发版265KB 

 2.2 引入JQuery

 二 .JQuery 对象 和 DOM 对象

1.DOM

1.1 DOM 模型

将html  xml等文档结构的标签语言 看成dom模型,下图为例,就是一个简单的DOM模型.

1.2 DOM 节点 

1.     元素节点      
   ...
   •     属性节点  ：title  src  alt ...
   •     文本节点： 文本节点

1.3 DOM 对象

     以上三种节点类型的具体对象 就是Dom对象。
    使用层面： 凡是JavaSCript能够直接操作的对象，就是Dom对象。
    例如，var title = document.getElementById("myTitile");通过js获取到的title对象 就是一个dom对象（就是

对象） 

 2. JQuery对象

   凡是jQuery能够直接操作的对象，就是jQuery对象。
    例如：var $title = $("#myTitile") ; 通过jquery获取到的 $title 就是一个jquery对象。
    同样一个元素，即可以成为一个dom对象（javascript对象），也可以成为一个jquery对象

注意：dom对象 只适用于js的各种语法（函数、属性），jquery对象只用于jquery的各种语法（函数、属性）。 
dom对象和jquery对象的各自独立。

例如:

•     title 是dom对象，因此可以使用js属性或方法 title.innerHTML
•     $title 是jquery对象，因此可以使用jquery属性或方法  $title.html()

建议:

• js对象 直接写title
• jquery 加上$，例如$title

3. JQuery对象和DOM对象的相互转换

例如:

     title.innerHTML;title ->$title  

     $title.html();   $title->title

 3.1 DOM 对象转化JQuery对象

DOM 对象转化为JQuery 对象非常简单,只需要用到JQuery工厂$().

语法:

$(DOM对象)

        let div = document.querySelector('.box');
        div.onclick = function () {
           window.alert($(div).html());
        }

3.2  JQuery对象转化DOM 对象

基础：jquery对象默认是一个数组 或集合；dom对象默认是一个单独的对象

所以将之转化为DOM对象有两种办法:

1. 看成数组:JQuery对象[0]
2. 看成集合:JQuery对象.get(0)

三.$()选择器

$ 就是jQuery的核心，query就是选择的意思

基础语法:

$(‘选择器’)，jQuery(‘选择器’)

$可以用jQuery代替，$和jQuery是同一个函数

选中某个或某类元素

1.$()选择的结果是一个类数组

        console.log($('#box'));
        [div#box]

既然是类数组，就不能直接跟原生js的语法

$('#box').style.backgroundColor = 'red';

选择结果是类数组,那么很明显上面的方式是错误的,如果想使用元素方法，可以加[0],将jQuery对象转成元素对象

$('#box')[0].style.backgroundColor = 'red';

2.使用方法(引号问题)

$(‘选择器’)里面的引号不能丢，在jQuery中只有是以下几个不用加引号，其他全部需要

不需要加引号的选择

• $(this)
• $(document)
• $(window)

 

3.文档加载

// 文档加载完毕后执行
$(document).ready(function(){
    
})
// 简写方案
$(function(){
    console.log($('div'))
})

 3.1 window.onload()函数和$(document).ready()函数的对比

函数名	window.onload()	$(document).ready()
执行时机	必须等待网页中所有的内容(如文档,图片,视频等)加载完毕之后才能执行	网页中所有DOM结构加载完毕之后即刻开始执行,(如文档,图片,视频等)并没有完全加载完毕
编写个数	同一页面不能编写多个	同一页面可以编写多个
简化写法	无	$(function() {....})

四. 选择器

这个是jQuery 的发明 和js没有关系

写在引号里面,:当成筛选的功能符

以下都是序号，筛选器.

1. 基本选择器

1.1 标签选择器

$('标签名')

        $("p").html() 获取p标签对象，是jquery对象形式的
        $("p").length

1.2 类选择器

$(".class值")

1.3 id选择器

$("#id值")

1.4 并集(或)选择器 

 逗号分割
 $(".class值,#id值")

1.5 交集选择器（同时存在）

连续直接写
        $(".class值#id值")
        $("p.myStyle").html()：选中 即是p标签，并且class的值是myStyle
        注意：不能出现歧义
            错误写法 $(".myStylep").html()
        交集选择器 在交接处 只能是.或#开头的选择器

1.6 全局选择器：选中全部的元素

选中全部的元素
$("*")

2.层次选择器

2.1 相邻选择器+

$("选择器1+选择器2")

2.2 同辈选择器 ~

$("选择器1~选择器2")

2.3 后代选择器 空格

$("选择器1 选择器2")

2.4 后代选择器 > 

$("选择器>选择器2")

3.属性选择器

$("[属性名]")

        $("[class]") :选中全部元素中 有class属性的元素

    $("[属性名=属性值]")
        $("[class=xxx]")  
        $("[class='xxx']")    
    

•     $("[class!=a]")  不等于， 包含两种： 有class但值不是a,   没有class
•     $("[class^=a]")  class以a开头的元素
•     $("[class$=a]")  class以a结尾的元素
•     $("[class*=a]")  class有a的元素

4. 过滤选择器

过滤选择器的一些方法和其他函数类型，例如 $("ul>li:first")等价于$("ul>li").first()
    有些不同，例如，  可以$("ul>li:odd")    ；错误$("ul>li").odd();

   基本过滤选择器（从0开始）

• :first：最开头那一个
• :last：最后那一个
• :even：偶数
• :odd:奇数
• :eq(index)：第index个

   其他选择过滤器

• :gt(index) : >index的全部元素
• :lt(index):
• :not(选择器) :除了...以外
• :header:选中所有的标题元素 h1 h2 ...
• :focus: 获取当前焦点的元素

5.可见性选择器

•     :visible ：选中所有可见的元素
•     :hidden：选中所有隐藏的元素

6.is()

判断是不是返回true,或false

判断点击的这个p标签是不是有这个类叫做

$('p').click(function(){
    alert($(this).is('.t'))
})

还可以判断是不是奇数的,is()里面可以写筛选器

$('p').click(function(){
    alert($(this).is(':odd'))
})

五. 序与迭代

1.序号eq()

按照选择器选中的元素,然后在通过序号挑选

    

    

        
this is box 1
        
this is box 2
        
this is box 3
    
    

        
this is box 4
        
this is box 5
        
this is box 6
    

 

也就是说 $()函数将返回一个对象队列,用eq来精确选择这个队列中的你想要的元素

2.index()方法

返回这个元素在亲兄弟中的排名,无视选择器怎么选.

    //index()方法
    $('p').click(function () {
        console.log($(this).index())
    })

依次点击六个box打印的结果如下:

$(this).index()是一个很常见的写法,表示触发这个事件的元素,在亲兄弟中的排名.

 利用index()方法写对应

    // 事件绑定在box1里面的p
    $('.box1 p').click(function(){
        // 改变的是box2里面的对应的p
        $('.box2 p').eq($(this).index()).css("background-color","red");
    })

3.each() 方法

迭代方法,说白了就是循环

表示遍历节点,也叫作迭代符合条件的节点

    $('p').each(function(index,item) {
        console.log(index);
        console.log(item);
        //原生js设置样式
        // item.style.backgroundColor = '#999';
        //JQuery方式
        $(item).css('background-color','#58a');
    })

4.size()方法和length属性

size() 方法和 length 属性是一样的, 获取jQuery对象中元素的个数.

这两个数字永远相同

    //获取所有p元素的个数
    console.log($('p').length); //6
    console.log($('p').size()); //6

值得注意的是,这两个获取到的值死一样的,但是我个人更推荐使用length属性,因为size()方法只有在1.8以下的版本才能用

5. get()方法

get()方法和eq()方法基本一致,都依赖$()的序列

不一样的是:

get()方法返回的是原生js的DOM对象

eq()方法返回的是JQuery对象

 

    $('p').get(0).style.backgroundColor = 'pink';
    $('p').eq(1).css('background-color','#999');

六. css样式

1. 读取样式值

读取样式，可以读取计算后的样式，写一个参数，为获取值的属性

参数为属性字符串，必须加引号

读取的值有单位

    console.log( $('p:first').css('background-color'));
    console.log( $('p:first').css('width'))

 

2. 设置属性值

2.1 设置一个属性值

如果只设置一个属性值，需要传两个参数，

第一个参数为需要设置值的属性

第二个参数为需要设置的值，如果为数值，不需要加单位，

    $("p:last").css('background-color','#81C784');
    $("p:last").css('width','300');

2.2 设置多个属性值

如果想要同时设置多个属性值，可以写成JSON

    $('p:odd').css({
        'width':300,
        'height':50,
        'background-color':'#8BC34A',
        'color':'#E0E0E0',
    });

当然,我们也可以单独的设置每一个样式达到同样的效果.

2.3 设置的属性可以多样

 设置的属性不仅可以为改变后的值，还可以设置+= 的值，就是在原有的基础上加多少像素

    $('p:eq(0)').css('width','+=100px');
    $('p:eq(2)').css('width','+=100');

两种写法效果相同.

3. 自定义属性

3.1 获取自定义属性

通过attr()方法获取自定义属性

console.log($('p:first').attr('data')); //first

3.2 设置自定义属性

    $('p:first').attr('data','123');
    //修改自定义属性data的值从first变为123

4. 有关于class类名

4.1 添加类名 addClass()

    $('p:last').addClass('last')

4.2 删除类名 removeClass()

    $('p:last').removeClass('last')

4.3 替换类名 toggleClass()

遵循有则删除,无则添加原则

$('p:last').toggleClass('last')

5. 关于节点值

5.1 html()

相当于原生JavaScript中的innerHTML

    $('p:first').html();  // 获取值
    $('p:first').html('
this is h2
'); // 设置值

5.2 text()

就是innerText

    $('p:first').text();  // 获取值
    $('p:first').text('
this is h2
'); // 设置值

七. 节点关系

1. children()

选中所有的子元素

表示选取亲儿子,不选择后代,选择所有的子元素

$('.box').children()

选择所有子元素中的div元素

$('.box').children('div')

还可以添加筛选器

$('.box').children('div:odd')

2. find()

查询所有的后代选择器,返回后代所有元素的列表

    console.log($('.box1').find('p'))

注意,和children()方法不一样,find()方法里面,必须写参数,表示后代的谁,

find就是寻找的意思,就是你找后代里的谁

3. parent()

找父元素,任何一个元素只有一个父元素

    console.log($('.box1 p').parent())

4. parents()

寻找所有的祖先元素,可以传参数,寻找哪个祖先元素

$('p').parents('div')

5. silbling()

寻找所有的亲兄弟元素节点

$('p').sibling()

可以添加选择器

$('p').sibling('div')

6. prev() next() prevAll() nextAll()

前一个兄弟,后一个兄弟,前所有的兄弟,后所有的兄弟元素节点

7. offsetParent()

查找定位父级

$('p').offsetParent('div')