jquery

来源：互联网发布：女明星瘦知乎编辑：程序博客网时间：2024/05/17 07:31

jquery的优势

►轻量级（Lightweight）

►强大的选择器

►出色的DOM操作封装

►可靠的事件处理机制

►出色的浏览器兼容性

jQuery的理念：写的少，做的多

通过http://www.w3school.com.cn/jquery/下载jQuery的库或学习

在需要的html中引入jQuery的库

<script type="text/javascript" src="jquery-3.2.1.js"></script>

美元符号（$）----是jQuery的入口其实就是一个函数，这个函数可以传入不同类型的参数匿名函数字符串
传入的函数相当于 window.onload=function(){}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>hellojquery.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引用js库 --><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">//美元符号（$）----是jQuery的入口  其实就是一个函数，这个函数可以传入不同类型的参数  匿名函数  字符串//传入的函数相当于 window.onload=function(){}alert($);$(function(){alert(document.getElementById("t"));});//不推荐使用  个人认为过期了$(document).ready(function(){alert("hello world!");})</script>  </head>    <body>    <input type="text" id="t">  </body></html>

jQuery对象与dom对象

jQuery对象

►jQuery对象就是通过 jQuery包装 DOM 对象后产生的对象

►jQuery对象是 jQuery独有的. 如果一个对象是 jQuery对象, 那么它就可以使用 jQuery里的方法: $(“#tab”).html();

►jQuery对象无法使用DOM 对象的任何方法, 同样 DOM对象也不能使用jQuery里的任何方法

dom对象

DOM全称是document object model(文档对象模型)，DOM是用来干什么的呢？假设把你的文档看成一个单独的对象， DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。

例如

<script type="text/javascript">window.onload=function(){document.getElementById("a").innerHTML="我";//龙大炮就变成了我}</script>  </head>    <body>  <div id="a"><p>龙大炮</p></div>  </body>

jQuery对象和DOM 对象的相互转换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>object.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="jquery-3.2.1.js"></script>  </head>  <script type="text/javascript">  $(function(){  //dom对象====标签对象   window  document对象   javaScript语言中  var body=document.body;  alert(body);    //jquery对象  //css选择器  jQuery选择器  找到满足选择器条件的dom元素相关的jQuery对象  //（jQuery对象其实就是一个包含了dom对象的数组）  //jQuery对象 不能调用js的方法和属性  只能调用jQuery内置的属性和方法  var jqueryObj=$("#username");  alert(jqueryObj.val());  //如果需要调用js的属性和方法  需要将jQuery对象转换成 dom对象  var domObj=jqueryObj[0];  alert(domObj.value);      //dom对象转换为jQuery对象  var userDom=document.getElementById("username");  var tt=$(userDom);  alert(tt.val());  })      </script>    <body>   <input type="text" id="username" value="123"/>  </body></html>

eq()和get()

eq是获取选择器中的多个jQuery对象中索引指定的那个

get 返回的是dom对象

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>wq.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">$(function(){var jo=$("input");//eq是获取 选择器中的多个jQuery对象中  索引指定的那个alert(jo.eq(1).val());//get()返回的是dom对象  jo.get(1)   一般使用[]alert(jo[1].value);})</script>  </head>  <body>   <input type="text" id="username" value="龙大炮">   <input type="password" id="password" value="123456">  </body></html>

奇偶行

odd：偶

even：奇
例：奇偶行变色（包含了设值属性样式，排除所有与给定选择器匹配的元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>odd.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">$(function(){//not  排除所有与给定选择器匹配的元素//.css() 设值属性样式//$("tr:even").not("[type='header']").css("background","green");$("tr:even:not([type='header'])").css("background","green");});</script>  </head>    <body>    <table>   <tr type="header"><th>用户姓名</th><th>用户性别</th><th>用户年龄</th></tr>   <tr><td>zs</th><td>男</td><td>11</td></tr>   <tr><td>ls</td><td>女</td><td>12</td></tr>   <tr><td>ww</td><td>骚</td><td>34</td></tr>   <tr><td>uu</td><td>妖</td><td>34</td></tr>   </table>  </body></html>

jquery方法的特点一般带一个参数表示获取该参数的值两个参数表示设置该属性的值

属性，css，HTML代码/文本/值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>css.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->        <!-- 内部样式 -->    <style type="text/css">    .myClass{    color:red;    }    </style><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">$(function(){//jquery方法的特点  一般带一个参数 表示获取该参数的值   两个参数表示设置该属性的值//=================属性===================/*attr(properties) attr(key, value) attr(key, fn) removeAttr(name) *///取得第一个匹配元素的属性值。alert($("input").attr("type"));//两个参数表示设置该属性的值  把type 设值成checkbox//$("input").attr("type","checkbox");//===============css===================/*addClass(class | fn) removeClass([class | fn]) toggleClass(class|fn [, sw]) 存在删除 不存在添加css()*///addclass添加内部样式到dom元素    <style type="text/css"></style>$("#myDiv").addClass("myClass")//removenClass移除样式表$("#myDiv").removeClass("myClass");//css(键，值)添加行内样式表  style=""$("#myDiv").css("color","green");//=============HTML代码/文本/值================/*html( [val | fn] ) text( [val | fn] ) val( [val | fn | arr] )*///val() 获取文本框的值//val(xxx) 设值文本框的值$("input").val("123");//获取标签里的内容 包含标签本身alert($("#myDiv").html());//获取标签里的内容  不含标签本身alert($("#myDiv").text());//把指定的标签里的所有内容都修改为指定的内容$("#myDiv").html("<font color=yellow>地方的</font>")});</script>  </head>  <body>    <input type="text" class="myClass">    <div id="myDiv">    <font>这是测试样式表</font>    <p>你好</p>    </div>  </body></html>

jquery的事件

1、click(function(){})绑定事件 unbind("click")解绑

one("click",function(){}) 该点击事件只能被点击一次

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>event.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <style type="text/css">    input{cursor:Hand}    </style>    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">$(function(){//=========绑定点击事件========$("#a").click(function(){alert("我被点击了");})//============消除绑定事件=============$("#b").click(function(){$("#a").unbind("click")})//=======该事件只能触发一次==========/*$("#c").one("click",function(){alert("下次该按钮点击不了了");})*/$("#c").bind("click",function(){alert("下次该按钮点击不了了");//把按钮置灰$(this).attr("disabled","disabled");})})</script>  </head>  <body>   <input type="button" id="a" value="点击">   <input type="button" id="b" value="取消点击按钮的点击事件">   <input type="button" id="c" value="该按钮只能点击一次">  </body></html>

2、获取和失去焦点 focus(function(){}) blur(function(){})

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>4.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../jquery-3.2.1.js"></script><script type="text/javascript">$(function(){//获取焦点  当获取鼠标焦点时 placeholder属性会自动消失    $('#a').focus(function(){      $(this).removeAttr('placeholder');      //失去焦点  当失去鼠标焦点时 placeholder属性会自动添加    }).blur(function(){      $(this).attr('placeholder','请输入邮箱地址');    });        //获取焦点    $('#b').focus(function(){      $(this).removeAttr('placeholder');      //失去焦点    }).blur(function(){      $(this).attr('placeholder','请输入邮箱密码');    });   });     </script>  </head>    <body>   <input type="text" id="a" placeholder="请输入邮箱地址"><br/>   <input type="text" id="b" placeholder="请输入邮箱密码"><br/>   <button>登录</button>  </body></html>

3、事件的委派

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>event.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <style type="text/css">    input{cursor:Hand}    </style>    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript">//==============事件委派  事件传播========================$(function(){$(document).on("click","input[name='t']",function(){alert("你点击了我 ");})//点击新增与上面按钮name="t"值一样的按钮$("#cre").click(function(){$(document.body).append("<input name='t' type='button' value='我是点击增加的'>")})})</script>  </head>  <body>   <input type="button" name="t" value="点击">   <input type="button" id="cre" value="点我新增按钮">  </body></html>

jquery+AJAX

语法格式

post

$(function(){$("#tt").click(function(){var url="http://restapi.amap.com/v3/weather/weatherInfo"$.ajax({//请求的类型type:"POST",//请求的路径url:url,//将返回的字符串 转化成json对象（JSON.parse(返回的字符串)）dataType:'json',data:带上要传递的数据//请求响应的回调函数  参数就是写回的json数据success:function(msg){msg就是一个json对象},//错误消息error:function(xhr,textStatus,errorThrown){alert(textStatus+"-----"+errorThrown);}})})})

get

$(function(){$("#dd").click(function(){var url=路径带上数据$.ajax({//请求的类型type:"GET",//请求的路径url:url,//将返回的字符串 转化成json对象（JSON.parse(返回的字符串)）dataType:'json',//请求响应的回调函数  参数就是写回的json数据success:function(msg){msg就是一个json对象},//错误提示error:function(xhr,textStatus,errorThrown){alert(textStatus+"-----"+errorThrown);}})})})

（查询高德天气，IP地址案例）

先去高德官网注册一个账号按照提示步骤先获取一个key值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.2.1.js"></script>


<script type="text/javascript">
$(function(){
//查天气
$("#tt").click(function(){
var url="http://restapi.amap.com/v3/weather/weatherInfo"
$.ajax({
//请求的类型
type:"POST",
//请求的路径
url:url,
//将返回的字符串转化成json对象（JSON.parse(返回的字符串)）
dataType:'json',
data:"key=a537e84b33afe79a0685eaf4c8b20b26&city="+$("#addcode").val(),
//请求响应的回调函数参数就是写回的json数据
success:function(msg){

//在浏览器中输入

//返回的数据

//浏览器

//返回在数据

var tq=msg.city;
var sf=msg.province;
alert(sf+tq);
},
error:function(xhr,textStatus,errorThrown){
alert(textStatus+"-----"+errorThrown);
}
})
})
})

</script>
</head>

<body>
<input id="addcode" type="text" placeholder="请输入城市名"/><input id="tt" type="button" value="查询天气"><br/>
<input id="addip" type="text" placeholder="请输入ip"/><input id="dd" type="button" value="查询城市">
</body>
</html>

方法扩展分为静态方法和实例方法的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>extend.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-3.2.1.js"></script>  <script type="text/javascript"> $(function(){ //静态方法的扩展 $.extend({ add:function(p1,p2){ return p1+p2; }  }) alert($.add(10,20));     //实例方法的扩展 $.fn.extend({ value:function(){ //这里的this是jQuery对象 return this[0].value; }  }) alert($("input[name='name']").value());  })  </script>  </head>  <input type="text" name="name" value="123">  <body>    </body></html>

循环

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>tool.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ //循环数组 var arr=["zs","ls"]; //第一个参数 数组的索引   第二个为对应的内容 $.each(arr,function(index,value){ console.log(index+"-----"+value); });   //循环json对象 var arr=[{id:1,name:"zs"},{id:2,name:"ls"}]; //第一个参数 数组的索引   第二个为对应的内容 $.each(arr,function(index,value){ console.log(index+"-----"+value.id); });  $("input[type='checkbox']").each(function(index,value){ //value是一个dom对象 //value.checked="checked";  $(value).attr("checked","checked"); }) });</script>  </head>    <body>    <input type="checkbox" />打篮球    <input type="checkbox" />游泳  </body></html>

获取表单的所有数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>form.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-3.2.1.js"></script>  <script type="text/javascript">  $(function(){  $("#btn").click(function(){  var paramStr=$("form").serialize();  alert(paramStr);  })  })  </script>    </head>    <body>  <form>用户名<input type="text" name="uname">密码<input type="text" name="password">再次密码<input type="text" name="repassword">年龄<input type="text" name="age">爱好：<input type="checkbox" name="hooby" value="0"/>打篮球    <input type="checkbox" name="hooby" value="1"/>游泳        <input id="btn" type="button" value="提交">    </form>  </body></html>

阅读全文

0 0