1.Jquery与Ajax笔记

1.1 Jquery包装集对象

获取一个Jquery元素包装集

var jqueryobject=$("#textdiv")

1.2 Jquery基础选择器

1.2.1 元素选择器

$("p") 选取元素。
$("p.intro") 选取所有 class="intro" 的元素。
$("p#demo") 选取所有 id="demo" 的元素。

1.2.2 属性选择器

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$ ='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

1.2.3 css选择器

实例： $("p").css("background-color","red");

1.2.4 其他选择器

语法	描述
$(this)	当前 HTML 元素
$("p")	所有元素
$("p.intro")	所有 class="intro" 的元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个的第一个元素
$("[href$ ='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的元素中的所有 class="head" 的元素

1.3 实例

1.3.1 元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:

$("p") $('button')

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
  </script>
  <script>
    $(document).ready(function (){
      $('button').click(function (){
        $("p").hide();
      });
    });
  </script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

1.3.2 #id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
  </script>
  <script>
    $(document).ready(function (){
      $('button').click(function (){
        $("#test").hide();
      });
    });
  </script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p  id="test">这是另一个段落。</p>
<button>点我</button>
</body>
</html>

1.3.3 .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
  </script>
  <script>
    $(document).ready(function (){
      $('button').click(function (){
        $(".test").hide();
      });
    });
  </script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p  class="test">这是另一个段落。</p>
<button>点我</button>
</body>
</html>

1.4 事件触发

1.4.1 语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ 

   // 动作触发后执行的代码!!

 });

1.4.2 事件方法

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

1.4.3 点击下滑

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

slidedowntoggle标识可以复原

可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function (){
      $("#flip").click(function (){
        $('#panel').slideDown('slow');
      });
    });
  </script>

  <style type="text/css">
    #panel,#flip
    {
      padding:5px;
      text-align:center;
      background-color:#e5eecc;
      border:solid 1px #c3c3c3;
    }
    #panel
    {
      padding:50px;
      display:none;
    }
  </style>
</head>
<body>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

1.4.4 获取属性

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

1.4.5 设置属性

设置内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

设置属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

1.4.6 插入

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});
</script>
</head>

<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

1.4.7 清空元素

jQuery empty() 方法删除被选元素的子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

1.5 Ajax

1.5.1 $.ajax

Jquery调用ajax方法；

格式：$.ajax({});

参数：

type:请求方式GET/POST；

data:发送到服务器的数据；

url:请求的url地址；

async:是否异步，true默认异步；

dataType:预期服务器返回数据的类型；

contextType:设置请求头；

success:成功时调用此函数；

error:错误时调用此函数；

get请求

<script>
$.ajax({
     url: "http://localhost/sltest/test4.php",      //请求接口的地址
     type: "GET",                                   //请求的方法GET/POST
     data: {                                        //需要传递的参数
        name: 'sl',
        password: '123456',
     },
     success: function (res) {                      //请求成功后的操作
          console.log(res);                          //在控制台输出返回结果
          var obj=JSON.parse(res);
          console.log(obj);                         //转换成JSON数据
      },
     error: function (err) {                       //请求失败后的操作
          console.log(22);                          //请求失败在控制台输出22
       }
   })
</script>

post请求

 <script>
    function submit() {
      $.ajax({
        type: "POST",
        url: "localhost:8080/travle/admin/login",
        data: {
          username: $("#username").val(),
          password: $("#password").val()
        },
        dataType: "JSON",
        success: function(result) {}
      });
    }
  </script>

Jquery 与Ajax基本学习