引出 模拟:
$是函数名 例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript">
  7. //自定义方法
  8. function $(domId){
  9. var obj=document.getELementById(domId);
  10. return obj
  11. }
  12. //单击按钮 获取文本框的value框
  13. function fun1(){
  14. //通过js中的id获取dom对象
  15. //var obj=document.getElementById("txt1");
  16. var obj=$("txt1");
  17. alert(obj.value);
  18. }
  19. function fun2(){
  20. //通过js中的id获取dom对象
  21. var obj=document.getElementById("txt2");
  22. //var obj=$("txt2");
  23. alert(obj.value);
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <input type="text" id="txt1" value="我是txt1"/><br/>
  29. <input type="text" id="txt2" value="我是txt2"/><br/>
  30. <input type="button" value="单击按钮1" onclick="fun1()"/><br/>
  31. <input type="button" value="单击按钮2" onclick="fun2()"/>
  32. </body>
  33. </html>

image.png

一、Jquery第一个例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>第一个例子</title>
  6. <!-->指定jquery的库文件位置,使用相对路径,当前项目的js目录下指定的文件-->
  7. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  8. <script type="text/javascript">
  9. /*
  10. 1.$( document) ,$是jQuery中的函数名称, document是函数的参数
  11. 作用是document对象变成jQuery函数库可以使用的对象。
  12. 2.ready:是jQuery中的函数,是准备的意思,当页面的dom对象加载成功后|会执行ready函数的内容。
  13. ready相当于js中的onLoad事件
  14. 3.function()自定义的表示onLoad后要执行的功能。
  15. */
  16. /* 标准写法 */
  17. $(document).ready(function()){
  18. //自定义功能代码
  19. alert("Hello Jquery")
  20. })
  21. /* 简略写法*/
  22. $(function(){
  23. alert("hello jQuery")
  24. }
  25. )
  26. </script>
  27. </head>
  28. <body>
  29. </body>
  30. </html>
  31. </head>
  32. <body>
  33. </body>
  34. </html>

二、DOM对象和Jquery对象

2.1. dom对象和jquery对象
dom对象,使用javascript的语法创建的对象叫做dom对象, 也就是js对象。
var obj= document.getElementById(“txt1”); obj是dom对象,也叫做js对象
obj.value;

jquery对象: 使用jquery语法表示对象叫做jquery对象, 注意:jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。

dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery , 语法: $(dom对象)
jquery对象也可以转为dom对象, 语法: 从数组中获取第一个对象, 第一个对象就是dom对象, 使用[0]或者get{0).

为什么要进行dom和jquery的转换:目的是要使用对象的方法,或者方法。
当你的dom对象时,可以使用dom对象的属性或者方法, 如果你要想使用jquery提供的函数,必须是jquery对象才可以

2.2dom对象转为jquery对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>dom对象转为jquery对象</title>
  6. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  7. <script type="text/javascript">
  8. function btnClick(){
  9. //-------------------------------------------------------------------
  10. //获取dom对象
  11. var obj=document.getElementById("btn");
  12. //使用dom的value属性,来获取值
  13. alert("使用dom对象的属性="+obj.value)
  14. //-----------------------------------------------------------------------------
  15. //把dom对象转jquery,使用jquery库中的函数
  16. var jobj= $(obj);
  17. //调用jquery中的函数,获取value值
  18. alert(jobj.val())
  19. //--------------------------------------------------------------
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <input type="button" id = "btn" value="我是按钮" onclick="btnClick()"/>
  25. </body>
  26. </html>

2.3jquery转dom对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  6. <script type="text/javascript">
  7. function btnClick(){
  8. //使用jquery获取页面中的dom对象
  9. //var obj=$("#txt")[0];//从数组中获取下标是0的dom对象
  10. var obj=$("#txt").get(0)//从数组中获取下标是0的dom对象
  11. var num =obj.value;
  12. obj.value=num*num;
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <input type="button" id = "btn" value="计算平方" onclick="btnClick()"/>
  18. <input type="text" id = "txt" value="整数"/>
  19. </body>
  20. </html>

3、基本选择器的使用

常用的选择器:
1) id选择器, 语法: $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象, id在当前页面中是唯一值。
2) class选择器, 语法: $(“.class样式名)
class表示css中的样式, 使用样式的名称定位dom对象的。
3) 标签选择器, 语法: $(“标签名称”)
使用标签名称定位dom对象的

3.2表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单

,均可做出相应选择。表单选择器是为了能更加容易地操作表单,表单选择器是根据元素类型来定义的




语法:$(“:type属性值”)例如:
$(“:text”)选取所有的单行文本框
$(“:password””)选取所有的密码框
$(“:radio”)选取所有的单选框
$(“:checkbox”)选取所有的多选框
举例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  6. <script type="text/javascript">
  7. function fun1(){
  8. //使用表单选择器$(":type的值")
  9. var obj = $(":text");
  10. alert(obj.val()); //必须保证前面的是jquery对象,才能用val()
  11. }
  12. function fun2(){
  13. //定位radio
  14. var obj = $(":radio");//数组,目前是两个对象 man,woman
  15. //循环数组,数组中的成员是dom对象,可以是dom的属性或函数
  16. forvar i=0;i<obj.length;i++){
  17. //从数组中获取成员,使用下标的方式
  18. var dom=obj[i];
  19. //使用dom对象的属性,获取value值
  20. alert(dom.value)
  21. }
  22. }
  23. function fun3(){
  24. //定位checkbox
  25. var obj=$(":checkbox");//数组,有三个元素
  26. for(int i =0;i<obj.length;i++){
  27. var dom=obj[i];
  28. // alert(dom.value);
  29. //使用jquery的val函数,获取value的值
  30. //1.需要jquery对象
  31. var jobj = $(dom);// jobj是 jquery对象
  32. // 2.调用jquery函数
  33. alert("jquery的函数调用="+jobj.val());
  34. }
  35. }
  36. </script>
  37. </head>
  38. <body>
  39. <input type="text" value ="我是type=text"/><br/>
  40. <input type="radio" value="man"/><br/>
  41. <input type="radio" value="woman"/><br/>
  42. <input type="checkbox" value="bike"/>骑行<br/>
  43. <input type="checkbox" value="football"/>足球<br/>
  44. <input type="checkbox" value="music"/>音乐<br/>
  45. <input type="button" value="读取text的值" onclick="fun1()"/>
  46. <input type="button" value="读取radio的值" onclick="fun2()"/>
  47. <input type="button" value="读取checkbox的值" onclick="fun3()"/>
  48. </body>
  49. </html>

3.3过滤器

过滤器:在定位了dom对象后,根据一些条件筛选dom对象。
过滤器是一个字符串,用来筛选dom对象的。
过滤器不能单独使用,必须和选择器一起使用。

基本过滤器

  1. 语法:$("选择器:first")<br /> 语法:$("选择器:last")<br />3.选择数组中指定对象<br /> 语法:$("选择器:eq(数组索引)")<br />4.选择数组中小于指定索引的所有DOM对象<br /> 语法:$(“选择器:lt(数组索引)")<br />5.选择数组中大于指定索引的所有DOM对象<br /> 语法:$(“选择器:gt(数组索引)")
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:gray;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. //$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready()
  13. //相当于是onload()
  14. $(function() {
  15. //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用。
  16. $("#btn1").click(function() {
  17. //过滤器
  18. var obj=$("div:first");
  19. obj.css("background","red");
  20. })
  21. //绑定btn3的事件
  22. $("#btn3").click(function() {
  23. var obj=$("div:eq(3)");
  24. obj.css("background","blue");
  25. })
  26. //绑定btn4的事件
  27. $("#btn4").click(function() {
  28. var obj=$("div:lt(3)");
  29. obj.css("background","orange");
  30. })
  31. })
  32. </script>
  33. </head>
  34. <body>
  35. <div id="one">我是div-0</div>
  36. <div id="two">我是div-1</div>
  37. <div>我是div-2
  38. <div>我是div-3</div>
  39. <div>我是div-4</div>
  40. </div>
  41. <div>我是div-5</div>
  42. <br/>
  43. <span>我是span</span>
  44. <br/>
  45. <input type="button" value="获取第一个div" id="btn1"/>
  46. <input type="button" value="获取下标等于3的div" id="btn3"/>
  47. <input type="button" value="获取下标小于3的div" id="btn4"/>
  48. </body>
  49. </html>

表单属性过滤器


1.选择可用的文本框
$(“:text:enabled”)

⒉选择不可用的文本框
$(“:text:disabled”)

3.复选框选中的元素
$(“:checkbox:checked”)

4.选择指定下拉列表的被选中元素
选择器>option:selected

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:gray;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. //$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready()
  13. //相当于是onload()
  14. $(function() {
  15. //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用。
  16. $("#btn1").click(function() {
  17. //获取所有可以使用的text
  18. var obj=$(":text:enabled");
  19. //设置jquery数组中所有的dom对象的value值
  20. obj.val("hello");
  21. })
  22. $("#btn2").click(function() {
  23. //获取选中的checkbox
  24. var obj=$(":checkbox:checked");
  25. for(var i =0;i<obj.length;i++){
  26. alert(obj[i].value);
  27. }
  28. })
  29. $("#btn3").click(function() {
  30. //获取select选中的值
  31. var obj=$("select>option:selected");
  32. alert(obj.val());
  33. })
  34. })
  35. </script>
  36. </head>
  37. <body>
  38. <input type="text" id="txt1" value="text1"/><br/>
  39. <input type="text" id="txt2" value="text2" disabled="true"/><br/>
  40. <input type="text" id="txt3" value="text3"/><br/>
  41. <input type="text" id="txt4" value="text4" disabled/><br/>
  42. <br/>
  43. <input type="checkbox" value="泳游"/>泳游<br/>
  44. <input type="checkbox" value="健身" checked/>健身<br/>
  45. <input type="checkbox" value="电子游戏" checked/>电子游戏<br/>
  46. <br/>
  47. <select id ="yuyan">
  48. <option value="java">java语言</option>
  49. <option value="go" selected>go语言</option>
  50. <option value="python">python语言</option>
  51. </select>
  52. <input type="button1" value="设置可用的text的value是hello" id="btn1"/>
  53. <input type="button2" value="显示选中的复选框的值" id="btn2"/>
  54. <input type="button3" value="显示下拉列表框的值" id="btn3"/>
  55. </body>
  56. </html>

4.绑定事件


jquery中给dom对象绑定事件
1)$(选择器).事件名称(事件的处理函数)
$(选择器):定位dom对象,dom对象可以有多个,这些dom对象都绑定事件了
事件名称: 例如: click
例如给id是btn的按钮绑定单击事件
$(“#btn”).click(function){
alert(“btn按钮单击了”)
})
2)on事件绑定
$(选择器) .on(事件名称,事件的处理函数)
事件名称:就是js事件中去掉on的部分,例如js中onclick ,这里就是click事件的处理的数:function定义。
例如,
$ ( “#btn” ) .on ( “click” , function () {处理按钮单击} )

五、函数

第一组函数

1.val

操作数组中 DOM对象的value 属性.
$(选择器).val() :无参数调用形式,读取数组中第一个DOM对象的value属性值
$(选择器).val(值):有参形式调用;对数组中所有DOM对象的value 属性值进行统一赋值

2.text

操作数组中所有DOM对象的【文字显示内容属性】

$(选择器):text():无参数调用,读取数组中所有DOM对象的文字显示内容,将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式,对数组中所有DOM对象的文字显示内容进行统一赋值

3.attr

对val, text,之外的其他属性操作
$(选择器).attr(“属性名”):获取DOM数组第一个对象的属性值
$(选择器).attr(“属性名”,”值”):对数组中所有DOM对象的属性设为新值

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:blue;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#btn1").click(function(){
  14. //val() 获取dom数组中第一个对象的value属性值
  15. var text =$(":test").val();
  16. alert(text)
  17. })
  18. $("#btn2").click(function(){
  19. //设置所有的text的value为新值
  20. $(":text").val("三国演义");
  21. })
  22. $("#btn3").click(function(){
  23. //获取div text()无参数,获取dom对象的文本值,连接成一个字符串
  24. alert( $("div").text());//1.我是第一个div2.我是第二个div3.我是第三个div
  25. })
  26. $("#btn4").click(function(){
  27. //设置div的文本值
  28. $("div").text("新的div文本内容");
  29. })
  30. $("#btn5").click(function(){
  31. //读取指定属性值
  32. alert($("img").attr("src"));
  33. })
  34. $("#btn6").click(function(){
  35. //设置指定属性的指定值
  36. $("img").attr("src","img/ex2.jpg");//将图片ex1.jpg变为图片ex2.jpg
  37. })
  38. })
  39. </script>
  40. </head>
  41. <body>
  42. <input type="text" value="刘备"/><br/>
  43. <input type="text" value="关羽"/><br/>
  44. <input type="text" value="张飞"/><br/>
  45. <br/>
  46. <div>1.我是第一个div</div>
  47. <div>2.我是第二个div</div>
  48. <div>3.我是第三个div</div>
  49. <br/>
  50. <img src="img/ex1.jpg" id="image1"/>
  51. <br/>
  52. <input type="button" value="获取第一个文本框的值" id ="btn1"/>
  53. <br/>
  54. <br/>
  55. <input type="button" value="设置文本框的value值" id ="btn2"/>
  56. <br/>
  57. <input type="button" value="获取所有div的文本值" id ="btn3"/>
  58. <br/>
  59. <input type="button" value="设置div的文本值" id ="btn4"/>
  60. <br/>
  61. <input type="button" value="读取src属性值" id ="btn5"/>
  62. <br/>
  63. <input type="button" value="设置指定的属性值" id ="btn6"/>
  64. </body>
  65. </html>

第二组函数

1.remove

  1. $(选择器).remove():将数组中所有DOM对象及其子对象一并删除

2.empty

$(选择器).empty():将数组中所有DOM对象的子对象删除

3.append


为数组中所有DOM对象添加子对象
$(选择器).append(“

我动态添加的div
“)

4.html

设置或返回被选元素的内容( innerHTML)。
$(选择器).html():无参数调用方法,获取DOM数组第一个匹元素的内容。
$(选择器).html(值):有参数调用,用于设置DOM数组中所有元素的内容。

5.each

each是对数组,json和 dom数组等的遍历,对每个元素调用一次函数。

语法1: $.each(要遍历的对象,function(index,element){处理程序})
语法2: jQuery 对象.each( function( index, element ) {处理程序})

index:数组的下标
element:数组的对象
前三个

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:blue;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#btn1").click(function(){
  14. //使用remove:删除父和子所有的dom对象
  15. $("select").remove(); //老虎和亚洲两组消失
  16. })
  17. $("#btn2").click(function(){
  18. //使用empty:删除子dom对象
  19. $("select").empty(); //删除子标签,父标签还存在
  20. })
  21. $("#btn3").click(function(){
  22. //使用append,增加dom对象
  23. // $("#father").append("<input type='button' value='我是增加的按钮'/>");
  24. //增加一个table
  25. $("#father").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>")
  26. })
  27. })
  28. </script>
  29. </head>
  30. <body>
  31. <select>
  32. <option value="老虎">老虎</option>
  33. <option value="狮子">狮子</option>
  34. <option value="豹子">豹子</option>
  35. </select>
  36. <br/>
  37. <select>
  38. <option value="亚洲">亚洲</option>
  39. <option value="欧洲">欧洲</option>
  40. <option value="美洲">美洲</option>
  41. </select>
  42. <br/>
  43. <div id="father">我是一个div</div>
  44. <input type="button" value="使用remove删除父亲和子对象" id="btn1"/>
  45. <br/>
  46. <input type="button" value="使用empty删除子对象" id="btn2"/>
  47. <br/>
  48. <input type="button" value="使用append,增加dom对象" id="btn3"/>
  49. </body>
  50. </html>

html函数

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:blue;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#btn4").click(function(){
  14. //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
  15. // alert($("span").text()); //我是mysql数据库
  16. alert($("span").html()); //我是mysql<b>数据库</b>
  17. })
  18. $("#btn5").click(function(){
  19. //使用 html(有参数): 设置dom对象的文本值
  20. $("span").html("我是新的<b>数据</b>");
  21. })
  22. })
  23. </script>
  24. </head>
  25. <body>
  26. <br/>
  27. <div id="father">我是一个div</div>
  28. <br/>
  29. <span>我是mysql <b>数据库</b></span>
  30. <span>我是jdbc</span>
  31. <br/>
  32. <input type="button" value="获取第一个dom的文本值" id="btn4"/>
  33. <br/>
  34. <input type="button" value="设置span的所有dom的文本值" id="btn5"/>
  35. </body>
  36. </html>

each函数
表示使用jquery的each,循环数组,每个数组成员,都会执行后面的处理函数”一次。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style type="text/css">
  6. div{
  7. background:blue;
  8. }
  9. </style>
  10. <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#btn6").click(function(){
  14. //循环普通数组,非dom数组
  15. var arr[]={11,12,13};
  16. $.each(arr,function(i,n){
  17. alert("循环变量"+i+"===数组成员"+n);
  18. })
  19. $("#btn7").click(function(){
  20. //循环json
  21. var json={"name":"张三","age":20}
  22. $.each(json,function(i,n){
  23. alert("i是key="+i+" , n是值="+n);
  24. })
  25. $("#btn8").click(function(){
  26. //循环dom数组
  27. var domArray = $(":text");//dom数组
  28. $.each(domArray,function(i,n){
  29. //n是数组中的dom对象
  30. alert("i="+i+" , n="+n.value);
  31. })
  32. })
  33. $("#btn9").click(function(){
  34. //循环jquery对象,jquery对象就是dom数组
  35. $(":text").each(function(i,n)){
  36. alert("i="+i+",n="+n.val);
  37. })
  38. })
  39. //8和9效果是一样的
  40. </script>
  41. </head>
  42. <body>
  43. <input type="text" value="刘备"/>
  44. <input type="text" value="关羽"/>
  45. <input type="text" value="张飞"/>
  46. <input type="button" value="循环普通数组" id="btn6"/>
  47. <input type="button" value="循环json" id="btn7"/>
  48. <input type="button" value="循环dom数组" id="btn8"/>
  49. <input type="button" value="循环jquery对象" id="btn9"/>
  50. </body>
  51. </html>