JQuery基础知识

1.JQuery介绍

JQuery是一个JavaScript库,是对ECMScript、dom、bom、的一个浅封装,让用户更方便操作。
理解成一个大的函数,函数内部封装了很多函数来供你使用。

学习jQuery之前需具备顶基础知识:

​ Html Css JavaScript

jQuery库包含以下功能

* HTML选取
* HTML元素操作
* CSS操作
* HTML事件函数
* JavaScript特效和函数
* HTML DOM遍历和修改
* AJAX

提示:除此之外,Jquery还提供了大量的插件,目前jQuery兼容于所有主流浏览器

在线使用:https://www.bootcdn.cn/jquery/

中文文档:https://jquery.cuishifeng.cn/

1.2JQuery安装

jQuery安装十分简单,只需要将jQuery的库导入到html中即可,我们可以下载下来也可以使用CDN资源。
一般我们在下载或者使用cdn资源的时候,都会让我们选择jquery.js 与 jquery.min.js版本,它们的区别在于jquery.min.js是经过压缩的,体积更小,适用于部署环境。而jquery适用于源码研究,我们对于jquery的学习,应该要上升到源码层次。

1.本地引入
2.在线引入




    
    
    
    Document
    //本地引入
    
    //源代码引入
    
    



    
one
two
three

1.3jQuery函数

通过"jQuery"和'$'来调用函数
1.$(选择器)
通过选择器选择到符合条件的Element元素,将其保存到jQuery对象中
2.$(html片段)
将html片段转换成Element元素,然后再封装成一个jQuery对象
3.$(Element元素)
将Element元素转换成一个jQuery对象
4.$(匿名函数)
匿名函数在文档加载完毕后执行,类似于window.onload=function(){}
// jquery核心函数
console.log($,typeof $) //function jQuery(selector, context)  function
// jquery核心对象
console.log($(),$() instanceof Object)//Object{}  true
1.选择器
    选择到符合条件的Element元素,将其保存到jQuery对象中
    console.log($('.box'));
    var children=$('.child');
    console.log(children);
     
one
two
three
2.html片段 将html代码片段转换成Element元素,封装成一个jQuery对象 var newChild=$('
four
'); console.log(newChild) 3.Element元素 console.log($('div'))--转换成一个Jquery对象 4.$(匿名函数)

1.比较原生js和jQuery

通过原生js和jQuery来获取到三个div并修改他们的背景色



    
    
    
    Document
    
    


    

1.4比较原生js和jquery入口函数的区别

原生js
    1.如果编写了多个入口就函数,后面的会覆盖掉前面的
      window.onload=function(){
            alert('我是入口函数1')
        };
      window.onload=function(){
            alert('我是入口函数2')
      }
jquery
    2.如果编写了多个入口函数 ,会依次执行
    $(document).ready(function(){
            alert('我是入口函数1jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数2jquery')
    })
    $(document).ready(function(){
            alert('我是入口函数3jquery')
    })
3.jquery入口函数的写法
    第一种:
        $(document).ready(function(){
            alert('我是入口函数3jquery')
        })
    第二种
         jQuery(document).ready(function(){
            alert('我是入口函数4jquery')
        })
    第三种-->推荐写法
         $(function(){
            alert('我是入口函数5jquery')
        })
    第四种
         jQuery(function(){
            alert('我是入口函数6jquery')
        })

1.5jQuery对象

jQuery对象是类数组对象,jQuery方法都是对类数组对象中元素的批量操作.

注意:jQuery对象可以调用jQuery.prototype中声明的方法,普通的Element元素则不能调用。在使用jquery的时候,拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例**

 $(function(){
     $('.child').text('hello')
 })

2.jQuery选择器

jQuery选择器与CSS选择器几乎完全一致,这里就不再赘述。

1.基本选择器

2.层次选择器

3.伪类选择器

4.伪元素选择器

5.属性选择器

$("form")
$("ul.nav > li")

jQuery中所有选择器都以美元符号开头:$()

1.元素选择器

在页面中选取所有

元素

$("div")

实例

用户点击按钮后所有

隐藏

$(function(){
            var div= $('div');
            console.log(div)
            var button=$('button');
            button.click(function(){
                div.hide()
            })

})
    
    
1
2
3
4
5
2.类选择器
 var child1=$('.child1')
            var button=$('button');
            button.click(function(){
                child1.hide()
 })

    
1
2
3
4
5
3.id选择器
$('#child2')
  var child2=$('#child2')
            var button=$('button');
            button.click(function(){
            child2.hide()
  })
    
    
1
2
3
4
5

3.事件绑定

jQuery的事件绑定与Element元素不同,不可以使用onxxx属性,也不能使用addEventListener,而是使用on(),可以理解为on是对于Element元素事件绑定的封装。

  1. on(event,[selector],[data],fn)
  2. off(event,[selector],fn)
  3. 3.one(event,[selector],fn)
  4. trigger(event,[data]) 模拟事件
  5. 快捷绑定 click
1.on 
$('.child').on('click',function(event){
                // this--dom节点
                console.log(this)
})
        
2.one
$('.child').one('click',function(event){
                // this--dom节点
                console.log(this)
 })
3.trigger 先有一个点击事件 trigger模拟点击事件
 $('.child').on('click',function(event){
                // this--dom节点
                console.log(this)
 })
 // trigger 模拟事件触发
 // 触发第一个child的点击事件
 $('.child:first-child').trigger('click')
4.off 解绑 解绑第二个参数必须是具名函数,匿名函数不可解绑
function handler(){
                console.log(this)
            }
$('.child').on('click',handler);
$('.child').off('click',handler);
5.快捷绑定
$('.child').click(function(){
                console.log(this)
})

3.2事件类型

2.click()

click()方法是当按钮点击事件被触发时会调用一个函数

3.dblclick()

当双击元素时,会发生dbclick事件

$('.child').dblclick(function(){
                console.log(this)
})

4.mouseenter()

当鼠标指针穿过元素时,会发生mouseenter事件

$('.child').mouseenter(function(){
                console.log(this)
})

5.mouseleave()

当鼠标指针离开元素时,会发生mouseleave事件

$('.child').mouseleave(function(){
                console.log(this)
})

6.mousedown()

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件

$('.child').mousedown(function(){
                console.log(this)
})

7.mouseup()

当元素上松开鼠标按钮时,会发生mouseup事件

$('.child').mouseup(function(){
                console.log(this)
})

8.hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时,会触发指定当第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定当第二个函数(mouseleave)

$('.child').hover(function(){
                console.log(this)
})

9.blur()

当元素失去焦点时,发生blur事件

$('input').blur(function(){
                console.log(this)
})

10.keydown()

键盘事件:按键按下事件

$('.child').keydown(function(){
                console.log(this)
 })

11.keyup()

键盘事件:按键抬起事件

 $('.child').keyup(function(){
                console.log(this)
 })

3.3事件代理

$('body').on('click','button',function (event) {
                console.log(event)
})

4.jQuery Dom操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法:append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法:wrap、unwrap、wrapAll、wrapInner、
替换方法:replaceWith、replaceAll
移除方法:empty、remove、detach
克隆方法:clone

1.append 将内容插入到元素内同尾部
    $(function(){
        $('.parent').append('Hello')
   })
    
parent
2.appendTo 讲添加的元素插入到目标元素中 $(function(){ $('
new
').appendTo('.parent') }) 3.empty();无参数 清空目标元素子节点 $('.parent').empty() 4.clone();默认浅克隆,只克隆节点不克隆事件;传递参数为true的时候深克隆,和dom事件一样克隆节点的时候,也会克隆事件 function myfun(){ console.log('dom克隆') } $('.child:last-child').on('click',myfun) $('.child:last-child').clone(true).appendTo('.parent');
one
two
three

4.2属性操作

1.属性:attr、removeAttr

2.css:addClass、removeClass、toggleClass

3.内容:html、text、val

1.atte 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数
    console.log($('.parent').attr('class'))
     
$('.parent').attr('title','one') console.log($('.parent').attr('title')) 2.removeAttr $('.parent').removeAttr('title') console.log($('.parent').attr('title')) 3.removeClass 移除类名 并且移除样式 $('.child').removeClass('child'); 4.addClass 添加类名 $('.child').addClass('active')
one
two
three
5.toggleClass 切换类名 原dom有类名删除,没有类名添加 $('.child').toggleClass('active')
one
two
three
使用this通过点击事件也可以切换 $('.child').on('click',function(){ $(this).toggleClass('active') }) 6. 获取内容 console.log($('.parent').html()); console.log($('.parent').text()); console.log($('input[type=text]').val());

5.静态方法

静态方法属于定义在jQuery函数上的方法,通过jQuery或者$直接调用的方法

数组及对象操作:each、map、toArray

5.1数组及对象操作

1.each 遍历数组或者对象 第一个参数 要遍历的数组或对象 第二个参数 处理函数

         var obj={
            name:"zhangsan",
            age:12
        }
        $.each(obj,function(index,item){
            console.log(index,item)
        })
2.toArray 将类数组对象转换为数组
console.log($('.child').toArray())
3.map() 将一个数组中的元素转换到另一个数组中
  var arr=$.map([0,1,2],function(item){
            return item+4
        })
  console.log(arr)

你可能感兴趣的