1. 首页
  2. 文章中心
  3. JQuery

JQuery基础知识

75 阅读 0 评论
我是靠谱客的博主 阳光美女，最近开发中收集的这篇文章主要介绍JQuery基础知识，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.JQuery介绍

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

jQuery库包含以下功能

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

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

1.1 JQuery函数

通过"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);
 	<div class="box">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
2.html片段
	将html代码片段转换成Element元素，封装成一个jQuery对象
	var newChild=$('<div class="new">four</div>');
    console.log(newChild)
3.Element元素
	console.log($('div'))--转换成一个Jquery对象
4.$(匿名函数)

1.比较原生js和jQuery
	通过原生js和jQuery来获取到三个div并修改他们的背景色
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <script>
        // 原生js来获取div并修改背景色
        window.onload=function(){
        	//1.获取element元素
            var div1=document.getElementsByTagName('div')[0];
            var div2=document.getElementsByClassName('box1')[0];
            var div3=document.getElementById('box2');
            console.log(div1,div2,div3)
        	//2.修改element元素背景色
            div1.style.backgroundColor='red'
            div2.style.backgroundColor='yellow';
            div3.style.backgroundColor='cyan';
            div1.style.width='400px';
            div1.style.height='400px';
        }
		//利用jquery获取div并修改背景色
		$(function(){
            // 获取到element元素
            var div1=$('div:first');
            var div2=$('.box1');
            var div3=$('#box2');
            console.log(div1,div2,div3)
            // 修改背景色
            div1.css({
                backgroundColor:'red'
            });
            div2.css({
                width:'400px',
                height:'200px',
                backgroundColor:'yellow'
            })
           	//如果是想要创建并插入节点
            var div4 = $('<div id="box3">four</div>').appendTo('.parent')
        })
    </script>
</head>
<body>
    <div></div>
    <div class="box1"></div>
    <div id="box2"></div>
</body>
</html>

1.2 比较原生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')
        })

2.JQuery选择器

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

1.基本选择器

2.层次选择器

3.伪类选择器

4.伪元素选择器

5.属性选择器

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

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

2.1 元素选择器

在页面中选取所有<div>元素

$("div")

实例

用户点击按钮后所有<div>隐藏

$(function(){
            var div= $('div');
            console.log(div)
            var button=$('button');
            button.click(function(){
                div.hide()
            })
})
	<button>隐藏按钮</button>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>

3.事件绑定

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

  1. on(event,[selector],[data],fn)

  2. off(event,[selector],fn)

  3. one(event,[selector],fn)

  4. trigger(event,[data]) 模拟事件

  5. 快捷绑定 click

1.on 
$('.child').on('click',function(event){
                // this--dom节点
                console.log(this)
})
		<div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>

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.1 事件类型

1.click()

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

2.dblclick()

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

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

3.mouseenter()

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

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

4.mouseleave()

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

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

5.mousedown()

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

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

6.mouseup()

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

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

7.hover()

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

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

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

8.blur()

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

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

9.keydown()

键盘事件：按键按下事件

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

10.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('<b>Hello</b>')
   })
	<div class="parent">parent</div>
2.appendTo 讲添加的元素插入到目标元素中
	 $(function(){
        $('<div class="new">new</div>').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');
		<div class="parent">
            <div class="child">one</div>
            <div class="child">two</div>
            <div class="child">three</div>
    	</div>

属性操作

1.属性：attr、removeAttr

2.css：addClass、removeClass、toggleClass

3.内容：html、text、val

1.atte 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数
	console.log($('.parent').attr('class'))
 	<div class="parent" title="lalalal"></div>
 	$('.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')
	 <div class="parent" title="lalalal">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
5.toggleClass 切换类名 原dom有类名删除，没有类名添加
	$('.child').toggleClass('active')
	<div class="parent" title="lalalal">
        <div class="child active">one</div>
        <div class="child active">two</div>
        <div class="child active">three</div>
    </div>
	使用this通过点击事件也可以切换
 	$('.child').on('click',function(){
            $(this).toggleClass('active')
    })
6.  获取内容
	console.log($('.parent').html());
    console.log($('.parent').text());
    console.log($('input[type=text]').val());

最后

以上就是阳光美女为你收集整理的JQuery基础知识的全部内容，希望文章能够帮你解决JQuery基础知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(50)

相关文章

jQuery 基础​​​
jQuery 基础​​​
jQuery 教程jQuery 教程
jQuery 教程jQuery 教程
jQuery入门基础
jQuery入门基础
用JQuery实现点击按钮来显示/隐藏某个div
用JQuery实现点击按钮来显示/隐藏某个div
JQuery基础知识
JQuery基础知识
JQueryJQuery 基础JQuery 高级
JQueryJQuery 基础JQuery 高级
jQuery如何实现点击下拉菜单的隐藏和显示
jQuery如何实现点击下拉菜单的隐藏和显示
Jquery属性操作、添加类
Jquery属性操作、添加类

评论列表共有 0 条评论

立即
投稿
返回
顶部