jQuery 配置和基本语法

这几天服务器配置没法继续向下进行了，学点jQuery作为补充，反正做网页也会用得到。

大三前端自学过bootstrap，jQuery和这个有相似之处，bootstrap是利用类来布置静态的布局，而jQuery则是利用jsp的对象选择来布置一些动态效果，jQuery是一个JavaScript库，极大地简化了JavaScript编程。配置也不需要太麻烦，直接利用script标签引入，网络引用即可，在head部分里加上：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

引入之后就可以根据jQuery的语法来调用提供的jsp函数库，bootstrap的核心是活用类，而jQuery则是活用对象，而首要的问题就是获取对象，对象的获取可以利用jQuery选择器。jQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。
在这里插入图片描述
其实这种获取对象的方法就是html的对象选择器，语法都是一样的，最常用的还是根据id或者class获取对象，代码如下：

 var tar=$("#dd");
 //获取id=dd的html元素
 var tar=$(".dd");
 //获取class=dd的元素

可以发现这种方式和jsp中getElementById和getElementByClass两种方法是很像的，所以说jQuery本身就是一个函数库，其作用就是为了简化一般函数的使用。
在这里插入图片描述
获取了对象，jQuery是根据对象的事件来决定执行什么的，比如说我通过前面的方法获取了一个按钮对象，当这个对象被点击时需要采取什么操作，我就需要给这个对象确定一个事件。jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery代码放到head部分的事件处理方法中。
常用的事件如下：
在这里插入图片描述
这里的事件很多，需要时可以参考开发手册：https://www.w3school.com.cn/jquery/jquery_ref_events.asp
在实际使用时，编译器常常会提示，jQuery的事件有时候与html的事件是很像的，在html中有onclick（），而这种表示方法在jQuery中就转变为对象名.click（执行的函数名）。

<script type="text/javascript">
$(document).ready(function(){
    
    
  $("button").click(function(){
    
    
    $("p").hide();
  });
});
</script>

上面这是一个很典型的jQuery示例，从基本的语法来看，这段话就是在整个html文件加载成功的时候就启动了对button的监听，一旦点击了button就会执行内部的函数。其实并不一定完全按照这个格式来写，但是一定都要放在$(document).ready(）里面，这样才可以让整个文档加载完成后就对各个对象进行监听，在函数中可以根据需要，对不同的对象增加不同的监听。另外，函数的定义也不一定要完全采用这种方式，可以在外面定义在里面调用。下面这种情况也是完全可以的：

function f0() {
    
    
      var tar1=$("#d1");
      tar1.css("left","0");
      var tar2=$("#d2");
      tar2.css("left","0");
      var tar3=$("#d3");
      tar3.css("left","0");
      var tar4=$("#d4");
      tar4.css("left","0");
      tar1.show();
      tar2.show();
      tar3.show();
      tar4.show();
    }
    function f1(){
    
    
      var tar1=$("#d1");
      tar1.animate({
    
    left:'250px'},"100ms");
      tar1.fadeOut("100ms");
    }
    function f2(){
    
    
      var tar2=$("#d2");
      tar2.animate({
    
    left:'250px'},"100ms");
      tar2.fadeOut("100ms");
    }
    function f3(){
    
    
      var tar3=$("#d3");
      tar3.animate({
    
    left:'250px'},"100ms");
      tar3.fadeOut("100ms");
    }
    function f4(){
    
    
      var tar4=$("#d4");
      tar4.animate({
    
    left:'250px'},"100ms");
      tar4.fadeOut("100ms");
    }
    function F1() {
    
    
      f0();
      setTimeout("f1()",200);
      setTimeout("f2()",400);
      setTimeout("f3()",600);
      setTimeout("f4()",800);
    }
    $(document).ready(function () {
    
    
      $("#bt1").click(function () {
    
    
        setInterval("F1()",2000)
      })
    })```

jQuery 配置和基本语法

猜你喜欢