JavaScript与jQuery(下篇)

JavaScript与jQuery笔记(下篇)

    • 一、获取jquery
    • 二、jquery选择器
    • 三、jquery事件
    • 四、jquery操作Dom元素
        • ————————
        • 创作不易,如觉不错,随手点赞,关注,收藏(* ̄︶ ̄),谢谢~~

jQuery

jquery库,里面存在大量的javascript函数

一、获取jquery

https://www.bootcdn.cn/jquery/

JavaScript与jQuery(下篇)_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>

使用jquery

<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery')
    })
</script>

二、jquery选择器

原生的js选择器的种类有:

  • 标签选择器:document.getElementByTagName()
  • id选择器: document.getElementByID()
  • 类选择器: document.getElementByClassName()

jq选择器有(css中的选择器他全部都能用):

  • 标签选择器:$(‘p’).click();
  • id选择器:$(’#id名’).click();
  • class选择器:$(’.class名’).click();
  • …查看文档看更多

文档工具站 https://jquery.cuishifeng.cn/

//原生态js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery css 中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class1').click(); //class选择器
公式:
$(selector).action()

三、jquery事件

鼠标事件,键盘事件,其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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 () {	
    	//e是鼠标移动的参数
        $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

四、jquery操作Dom元素

4.1 节点文本操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //拿到这个标签的文本,
    $('#test_ul li[name=python]').text();
    //修改这个标签的文本
    $('#test_ul li[name=python]').text('123');
    $ ( '#test-u7 ' ).htm1(;//获得值
    $( '#test-u7 ' ).htm1( ' 123 ');//设置值
</script>

4.2 css的操作

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    $ ( ' #test-u1 li[name=python] ').css(i"color" , "red"})
</script>

4.3 元素的显示和消失:本质是display:none

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

$('#test-ul li[name=python]').show()	//显示
$('#test-ul li[name=python]').hide()	//隐藏

4.4 娱乐测试

<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();		//隐藏就显示,显示就隐藏

————————

创作不易,如觉不错,随手点赞,关注,收藏(* ̄︶ ̄),谢谢~~

你可能感兴趣的:(前端,javascript,jquery,jquery选择器,jquery事件,操作dom元素)