JQuery

小俊会编码

已于 2022-08-05 15:38:49 修改

阅读量170

点赞数

分类专栏： javaSE

于 2022-08-05 08:50:58 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/126154062

版权

jquery javascript angular.js

javaSE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.概念：

JQuery就是JavaScript库。在开发过程中，处理浏览器的兼容很复杂而且很耗费时间，所以就封装了这些操作的库。常见的JavaScript库jQuery、react、vue、Angular。其中jQuery是最常用的一个。

二.使用

写页面的时候如果要使用JQuery，首先要引入，直接拖入就行

三.练习

JQuery选择器

1. 获取并设置网页中所有<h3>元素的背景
2. “h3”为选择器语法，必须放在$()中
3. $(“h3”)返回jQuery对象
4. .css()是为jQuery对象设置样式的方法

分类

类选择器

基本选择器
1. 全局选择器
2. 交集选择器
3. 并集选择器
4. ID选择器
5. 类选择器
6. 标签选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.js"></script>

    <script>

        //基本选择器，层次选择器，属性选择器，基本过滤选择器，可见性过滤选择器

        $(function () {
            /*//id选择器
            $('#sp').css('color','blue');//一行内分号可写可不写，如果一行有多条语句，则要写
            //标签选择器
            $('span').css('color','yellow')
            //类选择器
            $('.c').css('color','red')
            $('h1,b').css('color','blue')
            //可以同时选择多个标签
            $('label,h3,i,div').css('fontSize','55px')
            $('label,h3,i,div').css('color','darkgrey')
            //注意是冒号
            $('tr:odd').css({
                'background':'blue',
                'color':'white'
            });*/

            //属性选择器，用中括号
        /*    $('[href]').css('color','red');
            $('[href = "#"]').css('color','red');
            $('[href != "#"]').css('color','red');
            以a开头
            $('[href^= "a"]').css('color','red');
            以a结尾
            $('[href$= "a"]').css('color','red');
            包含a
            $('[href*= "a"]').css('color','red');
*/
            //基本过滤选择器
            //偶数
            /*$('li:even').css('color','blue');
            //奇数
            $('li:odd').css('color','red');
            $('li:first').css('color','gold');
            $('li:last').css('color','green');*/

            //从0开始计算,
            $('li:eq(3)').css('color','red');
            //从i+1开始到最后
            $('li:gt(4)').css('color','blue');
            //从0到i-1
            $('li:lt(3)').css('color','yellow');
        });
    </script>
</head>
<body>
<span id="sp">hello</span>
<div class="c">帅气的</div>
<span class="c">小</span>
<b class="c">星</b>
<h1>星</h1>
<h1 class="b">可爱</h1>
<h1 class="b">的</h1>
<hr>
<label>小</label>
<h3>杰杰</h3>
<i>!!!</i>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
</table>

<!--属性选择器-->
<a href="">aaa</a>
<a href="#">bbb</a>
<a href="abc">abc</a>
<a href="bac">bac</a>
<a href="cba">cba</a>

<ul>
    <li>小星星</li>
    <li>小姐姐</li>
    <li>小俊俊</li>
    <li>小杰杰</li>
    <li>小丹丹</li>
    <li>小妹妹</li>
    <li>小弟弟</li>
    <li>小姐姐</li>
</ul>
</body>
</html>

效果

层次选择器
属性选择器

过滤选择器
1. 基本选择过滤器
4. 可见性过滤选择器

JQuery当中的事件

基础事件：

window事件

鼠标事件

$(function () {
    $('li').click(function () { 
        //鼠标点击添加样式         
        $(this).addClass('c');
    })
    $('li').mouseover(function () {
        //鼠标移入添加样式
        $(this).addClass('c');
    })
    $('li').mouseout(function () {
        //鼠标移出取消样式
        $(this).removeClass('c');
    })

键盘事件

  //键盘按下执行
/*  $('#age').keydown(function () {
          alert('down');
  })*/
  // 键盘释放显示
  /*$('#age').keyup(function () {
      alert('up');
  })*/

  //这里不懂，产生可打印的字符时
  /*$('#age').keypress(function (event) {
      console.log("press");
      // console.log(event.keyCode)
  })*/

表单事件

//获得焦点触发focus事件
$('#name,#age').focus(function () {
    $(this).addClass('input_focus')
})
//失去焦点触发blur事件
$('#name,#age').blur(function () {
    $(this).removeClass('input_focus')
}

5.除了使用事件名绑定事件外，还可以使用bind()方法

$('#ok').bind('click',function () {
    alert('绑定了事件click')
})
$('#ok').bind('mouseout',function () {
    alert('绑定了事件mouseover')
})
$('#ok').bind({
     mouseover:function(){
        $("ul").css("display","none");
     }
     mouseout:function(){
        $("ul").css("display","block");
     }
})
//参数可写可不写，如果不写，则取消所有绑定事件
$('#ok').unbind('click')

复合事件是个多事件的组合

鼠标光标悬停

$('li:eq(1)').hover(
    function () {
        //光标移入时触发
        $(this).css('background-color','red')
    },
    function () {
        //光标移出时触发
        $(this).css('color','blue')
    }
)

鼠标连续点击

$('#ok').toggle(
    function () {
        alert('点了1次，第一次触发')
    },
    function () {
        alert('点了2次，第二次触发')
    },
    function () {
        alert('点了3次，第三次触发')
    }

)

JQuery动画效果（用一张图片来示例一下）

控制元素显示与隐藏（显示速度可以取如下值：毫秒（如1000）、slow、normal、fast）
控制元素淡入淡出
改变元素高度

切换元素可见状态

$(function () {
    $('#ok').css('margin-left','500px')
    $('img').css('margin-left','300px')
    $('img').css('width','500px')
    $('#ok').click(function () {

        //显示和隐藏
        $('div').show(300)
        $('div').hide(300)

        //淡入和淡出,3000是毫秒
        $('div').fadeIn(300);
        $('div').fadeOut(300);

        //逐步延伸显示，逐步缩短隐藏
        $('div').slideDown(1000)
        $('div').slideUp(1000);

    })

})