jQuery的讲解

文章目录

    • 1.jQuery的概念:
    • 2.jQuery支持的浏览器:
    • 3.jQuery语言的特点:
    • 4.jQuery的语法
        • 1).选择器
        • 2).事件
        • 4).操作DOM
        • 5).css的操作

1.jQuery的概念:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery库,里面存在大量的JavaScript函数。jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2.jQuery支持的浏览器:

官方网站列出了下列支持jQuery的浏览器:

FirefoX 2.0+

Internet Explorer 6+

Safari 3+

Opera 10.6+

Chrome 8+

3.jQuery语言的特点:

快速获取文档元素
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。

提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。

创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。

提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。

增强的事件处理
jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

更改网页内容
jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

4.jQuery的语法

jQuery 中所有选择器都以美元符号开头:$(选择器).事件(事件函数)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>

    //选择器就是css的选则器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
</script>
</body>

1).选择器

<script>
    //原生js,选择器少,麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery  css 中的选择器它全部都能用!
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click() //class选择器
</script>

</body>

2).事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求:获取鼠标当前的一个坐标-->
mouse :<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后,响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>


</body>

4).操作DOM

$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('123'); //设置值

5).css的操作

 $('#test-ul li[name=python]').css({"color","red"})

点我

你可能感兴趣的:(JavaWeb)