jQuery

jQuery库，里面存在大量的JavaScript函数

 

jQuery公式介绍：  $(selector).action(事件函数)

                                  选择器     事件

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  cdn 引入-->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

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

</script>

</body>
</html>

 

 

选择器

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

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

文档工具类：http://jquery.cuishifeng.cn/

 

 

事件

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

 <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>

 

 

操作DOM

 节点文本操作

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

 

css操作

$('#test-ul li[name=python]').css('color','pink');   //设置字体颜色
$('#test-ul li[name=python]').css('background','orange');   //设置背景颜色

 

元素的显示和隐藏：本质：display : none；

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

 

娱乐测试

$(window).width();    //窗口的宽度
$(window).hieght();   //窗口高度
$('#test-ul li[name=python]').toggle();   //切换效果

 

未来ajax ()

$('#from').ajax()

$.ajax({url:'test.html', context:document.body, success:function(){
      $(this).addClass("done");
}});

 

 

前端开发小技巧

1.巩固JS（看jQuery源码，游戏代码！）

2.巩固HTML、CSS（扒网站，全都down下来，然后对应修改来看效果）

 

posted @ 2021-07-05 16:52  cengxuyuan  阅读(42)  评论(0)    收藏  举报