jQuery基础

　　jQuery 是一个JavaScript 库，让开发者快速操作页面元素，实现交互。

jQuery基础–语法#

  • 基础语法是：$(selector).action()
  • $为jQuery的别名（简写）
  • 选择器（selector）“查询”和“查找”HTML 元素
  • jQuery 的action() 执行对元素的操作

常用选择器：#

  • 标签选择器　　p
  • id选择器　　#demo
  • 类选择器　　.demo

显示或者隐藏图片

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <script  src="js/jquery.min.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    <div>
        <button id="button">显示/隐藏</button>
    </div>
 
<img src="images/girl.jpg" class="demo" id="image" alt="图片加载不成功">
</body>
<script type="text/javascript">
    $('#button').on('click',function(){
        if ($('#image').is(':visible')){
            // id选择器
            $('#image').hide();
            // 标签选择器
            $('button').css("background",'red')
        }else{
            $('#image').show();
            $('#button').css("background",'#bfa')
        }
    });
 
 
</script>
</html>　

元素操作：#

  • 添加/替换：append() html()
  • 隐藏/展示：show()  fadeIn()     hide() fadeOut()
  • 删除: remove

 

?
1
2
3
4
5
6
7
8
9
10
$('#container')
n.fn.init [div#container, context: document, selector: "#container"]
$('#container').append('<p>hello</>')
n.fn.init [div#container, context: document, selector: "#container"]
$('p').hide()
n.fn.init [p, prevObject: n.fn.init(1), context: document, selector: "p"]
$('p').show()
n.fn.init [p, prevObject: n.fn.init(1), context: document, selector: "p"]
$('p').remove()
n.fn.init [p, prevObject: n.fn.init(1), context: d

　

常见的事件　#

  • 点击：click
  • 双击: dblclick
  • 鼠标移上: mouseover
  • 鼠标移开: mouseout

点击超链接显示提示，移开消失。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <p><a href="#" class="demo" title="显示超链接1">超链接1.</a></p>
    <p><a href="#" class="demo" title="显示超链接2">超链接2.</a></p>
 
    <script  src="js/jquery.min.js" type="text/javascript"></script>
     
    <script type="text/javascript"> 
      $(".demo").mouseover(function(e){  
          var title = $(this).attr('title');        
          var tooltip = "<div id='tooltip'>"+ title +"<\/div>"; //创建 div 元素  
          $("body").append(tooltip);  //把它追加到文档中  
          $("#tooltip").css({  
                  "top": e.pageY  + "px",  
                  "left": e.pageX   + "px" 
              }).show("fast");      //设置x坐标和y坐标，并且显示  
      }).mouseout(function(){         
          $("#tooltip").remove();   //移除   
      });  
    </script>
 
</body>
 
 
</html>

　　

posted @   头痛不头痛  阅读(573)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示
主题色彩