AI智能
改变未来
当前位置：爱站程序员基地 > 全栈知识 > JQuery > 正文

jQuery框架_01_快速入门

2021-09-09 分类：JQuery 评论(0)

jQuery框架_01_快速入门

jQuery简介

  • jQuery 是一个 JavaScript 库(定义好的一个 JS 文件，内部封装了很多功能，可以大大简化 JS 操作步骤，提高开发效率，使用前先用<script>导入文件)。
  • 程序员只需要编写一套代码 ，就可以无差异的运行在所有的浏览器上。(同一段JS代码在不同的浏览器上执行效果是有差异的，可能会针对不同浏览器编写不同js代码)

基本语法

jQuery对象与js对象之间的转换

JS对象无法使用JQ对象中方法，如果JS对象需要使用JQ对象中方法，必须将JS对象转成JQ对象，反之亦然。

1.转换语法
操作 方法
将JS对象–>jQuery对象 $(JS对象)
将jQuery对象–> JS对象 JQ对象[0] 或 JQ对象.get(0)
JQ对象本质上是JS的一个数组对象		 
<script>// JS方式，通过id属性值获取div元素let jsDiv = document.getElementById(\"div\");alert(jsDiv.innerHTML);//alert(jsDiv.html());  JS对象无法使用jQuery里面的功能// 将 JS 对象转换为jQuery对象let jq = $(jsDiv);alert(jq.html());// jQuery方式，通过id属性值获取div元素let jqDiv = $(\"#div\");alert(jqDiv.html());// alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能// 将 jQuery对象转换为JS对象let js = jqDiv[0];alert(js.innerHTML);</script>
2.事件

事件处理函数的命名

所有的事件处理函数前面相比于js都没有on

jQuery中常用的事件

事件方法 功能
blur() 失去焦点
change() 改变事件
click() 单击事件
dblclick() 双击事件
focus() 得到焦点
keydown() 键盘按下
keyup() 松开键盘
mouseover() 鼠标移上
mouseout() 鼠标移出
submit() 表单提交 
<body><input type=\"button\" id=\"btn\" value=\"点我\"><br><input type=\"text\" id=\"input\"></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//单击事件$(\"#btn\").click(function(){alert(\"点我干嘛?\");});//获取焦点事件// $(\"#input\").focus(function(){//     alert(\"你要输入数据啦...\");// });//失去焦点事件$(\"#input\").blur(function(){alert(\"你输入完成啦...\");});//链式定义：失去焦点事件，获取焦点事件$(\"#input\").blur(function(){alert(\"你输入完成啦...\");}).focus(function(){alert(\"你要输入数据啦...\");});</script>
3.事件的绑定和解绑
  • 绑定事件

jQuery 对象.on(事件名称,执行的功能);

  • 解绑事件

jQuery 对象.off(事件名称); 注：如果不指定事件名称，则会把该对象绑定的所有事件都解绑

<body><input type=\"button\" id=\"btn1\" value=\"点我\"><input type=\"button\" id=\"btn2\" value=\"解绑\"></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//给btn1按钮绑定单击事件// $(\"#btn1\").on(\"click\",function(){//     alert(\"点我干嘛?\");// });$(\"#btn1\").click(function(){alert(\"点我干嘛？\");$(\"#btn1\").off(\"click\");});//通过btn2解绑btn1的单击事件$(\"#btn2\").on(\"click\",function(){$(\"#btn1\").off(\"click\");//off()里不接事件名称会解绑所有事件// $(\"#btn1\").off();});</script>
4.遍历

  • 方式一：传统方式

    for(let i = 0; i < 容器对象长度; i++){执行功能; }

  • 方式二：对象.each() 方法

    容器对象.each(function(index,ele){执行功能; }

  • 方式三：$.each() 方法

    $.each(容器对象,function(index,ele){执行功能;});

  • 方式四：for of 语句

    for(ele of 容器对象){执行功能; }

<script>//方式一：传统方式/*$(\"#btn\").click(function(){let lis = $(\"li\");for(let i = 0 ; i < lis.length; i++) {alert(i + \":\" + lis[i].innerHTML);}});*///方式二：对象.each()方法/*$(\"#btn\").click(function(){let lis = $(\"li\");lis.each(function(index,ele){alert(index + \":\" + ele.innerHTML);});});*///each原理解析// function fun(index,ele){//     alert(index+\":\"+ele.innerHTML)// }// $(\"#btn\").click(function(){//     let lis = $(\"li\");//     lis.each(fun);// });// list.each(fun)  list.each()相当于for循环,fun就是循环体//方式三：$.each()方法/*$(\"#btn\").click(function(){let lis = $(\"li\");$.each(lis,function(index,ele){alert(index + \":\" + ele.innerHTML);});});*///自己实现$.each()// $(\"#btn\").click(function(){//     let lis = $(\"li\");//     each(lis);// });// function each(lis){//     for(let i = 0 ; i < lis.length; i++) {//         alert(i + \":\" + lis[i].innerHTML);//     }// }//方式四：for of 语句遍历$(\"#btn\").click(function(){let lis = $(\"li\");for(ele of lis){alert(ele.innerHTML);}});</script>

选择器

1.基本选择器
基本选择器 语法 作用
ID选择器 $(\”#ID\”) 根据id属性值获取元素对象
类选择器 $(\”.类名\”) 根据class属性值获取元素对象数组
元素选择器 $(“元素名”) 根据元素名称获取元素对象数组 
<body><div id=\"div1\">div1</div><div class=\"cls\">div2</div><div class=\"cls\">div3</div></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//1.元素选择器   $(\"元素的名称\")let divs = $(\"div\");//alert(divs.length);console.log(divs);//2.id选择器    $(\"#id的属性值\")let div1 = $(\"#div1\");//alert(div1);console.log(div1);//3.类选择器     $(\".class的属性值\")let cls = $(\".cls\");alert(cls.length);</script>
2.层级选择器
层级选择器 语法 作用
后代选择器 $(“A B”); A下的所有B(包括B的子级)
子选择器 $(“A > B”); A下的所有B(不包括B的子级)
兄弟选择器 $(“A + B”); A相邻的下一个B
兄弟选择器 $(“A ~ B”); A相邻的所有B 
<body><p>p00</p><div><span>s1<span>s1-1</span><span>s1-2</span></span><span>s2</span></div><p>p0</p><div></div><p>p1</p><p>p2</p></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 1. 后代选择器 $(\"A B\");      A下的所有B(包括B的子级)let spans1 = $(\"div span\");//alert(spans1.length);// 2. 子选择器   $(\"A > B\");    A下的所有B(不包括B的子级)let spans2 = $(\"div > span\");//alert(spans2.length);// 3. 兄弟选择器 $(\"A + B\");    A相邻的下一个Blet ps1 = $(\"div + p\");// alert(ps1.length);console.log(ps1);// 4. 兄弟选择器 $(\"A ~ B\");    A相邻的所有Blet ps2 = $(\"div ~ p\");// alert(ps2.length);</script>
3.属性选择器
属性选择器 语法 作用
属性名选择器 $(“A[属性名]”); 根据指定属性名获取元素对象数组
属性值选择器 $(“A[属性名=属性值]”); 根据指定属性名和属性值获取元素对象数组 
<body><input type=\"text\"><input type=\"password\"><input type=\"password\"></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//1.属性名选择器   $(\"元素[属性名]\")let in1 = $(\"input[type]\");//alert(in1.length);//2.属性值选择器   $(\"元素[属性名=属性值]\")let in2 = $(\"input[type=\'text\']\");alert(in2.length);</script>
4.过滤器选择器
过滤选择器 语法 作用
首元素选择器 $(“A:first”); 获得选择的元素中的第一个元素
尾元素选择器 $(“A:last”); 获得选择的元素中的最后一个元素
非元素选择器 $(“A:not(B)”); 不包括指定内容的元素
偶数选择器 $(“A:even”); 偶数，从 0 开始计数
奇数选择器 $(“A:odd”); 奇数，从 0 开始计数
等于索引选择器 $(“A:eq(index)”); 等于第几个 equals
大于索引选择器 $(“A:gt(index)”); 大于第n个，不含第index个
小于索引选择器 $(“A:lt(index)”); 小于第n个，不含第index个 
body><div>div1</div><div id=\"div2\">div2</div><div>div3</div><div>div4</div></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 1.首元素选择器	$(\"A:first\");let div1 = $(\"div:first\");//alert(div1.html());// 2.尾元素选择器	$(\"A:last\");let div4 = $(\"div:last\");//alert(div4.html());// 3.非元素选择器	$(\"A:not(B)\");let divs1 = $(\"div:not(#div2)\");//alert(divs1.length);// 4.偶数选择器	    $(\"A:even\");let divs2 = $(\"div:even\");//alert(divs2.length);//alert(divs2[0].innerHTML);//alert(divs2[1].innerHTML);// 5.奇数选择器	    $(\"A:odd\");let divs3 = $(\"div:odd\");//alert(divs3.length);//alert(divs3[0].innerHTML);//alert(divs3[1].innerHTML);// 6.等于索引选择器	 $(\"A:eq(index)\");let div3 = $(\"div:eq(2)\");//alert(div3.html());// 7.大于索引选择器	 $(\"A:gt(index)\");let divs4 = $(\"div:gt(1)\");//alert(divs4.length);//alert(divs4[0].innerHTML);//alert(divs4[1].innerHTML);// 8.小于索引选择器	 $(\"A:lt(index)\");let divs5 = $(\"div:lt(2)\");alert(divs5.length);alert(divs5[0].innerHTML);alert(divs5[1].innerHTML);</script>
5.表单属性选择器
表单属性选择器 语法 作用
可用元素选择器 $(“A:enabled”); 获得可用元素
不可用元素选择器 $(“A:disabled”); 获得不可用元素
单选/复选框被选中的元素 $(“A:checked”); 选中（单选radio ，多选checkbox）
下拉框被选中的元素 $(“A:selected”); 选择（下列列表<select>中的<option>） 
<body><input type=\"text\" disabled><input type=\"text\" ><input type=\"radio\" name=\"gender\" value=\"men\" checked>男<input type=\"radio\" name=\"gender\" value=\"women\">女<input type=\"checkbox\" name=\"hobby\" value=\"study\" checked>学习<input type=\"checkbox\" name=\"hobby\" value=\"sleep\" checked>睡觉<select><option>---请选择---</option><option selected>本科</option><option>专科</option></select></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 1.可用元素选择器  $(\"A:enabled\");let ins1 = $(\"input:enabled\");//alert(ins1.length);// 2.不可用元素选择器  $(\"A:disabled\");let ins2 = $(\"input:disabled\");//alert(ins2.length);// 3.单选/复选框被选中的元素  $(\"A:checked\");let ins3 = $(\"input:checked\");//alert(ins3.length);//alert(ins3[0].value);//alert(ins3[1].value);//alert(ins3[2].value);// 4.下拉框被选中的元素   $(\"A:selected\");let select = $(\"select option:selected\");alert(select.html());</script>

DOM

1.操作文本

语法：

html() 类似于js的innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于js的innerText，标签是不起作用的
val() 类似于js的value属性，设置或获取值。如：val(“值”)设置值 val()获取值

<body><div id=\"div\">我是div</div><input type=\"button\" id=\"btn1\" value=\"获取div的文本\"><input type=\"button\" id=\"btn2\" value=\"设置div的文本\"></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>//1. html()   获取标签的文本内容$(\"#btn1\").click(function(){//获取div标签的文本内容let value = $(\"#div\").html();alert(value);});//2. html(value)   设置标签的文本内容，解析标签$(\"#btn2\").click(function(){//设置div标签的文本内容//$(\"#div\").html(\"我真的是div\");$(\"#div\").html(\"<b>我真的是div</b>\");});</script>
2.操作对象

语法：

  • $(“元素”) 创建指定元素
  • append(element) 添加成最后一个子元素，由添加者对象调用
  • appendTo(element) 添加成最后一个子元素，由被添加者对象调用
  • prepend(element) 添加成第一个子元素，由添加者对象调用
  • prependTo(element) 添加成第一个子元素，由被添加者对象调用
  • before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
  • after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
  • remove() 删除指定元素(自己移除自己)
  • empty() 清空指定元素的所有子元素
<body><div id=\"div\"></div><input type=\"button\" id=\"btn1\" value=\"添加一个span到div\"> <br><br><br><input type=\"button\" id=\"btn2\" value=\"将加油添加到城市列表最下方\"> &nbsp;&nbsp;&nbsp;<input type=\"button\" id=\"btn3\" value=\"将加油添加到城市列表最上方\"> &nbsp;&nbsp;&nbsp;<input type=\"button\" id=\"btn4\" value=\"将雄起添加到上海下方\"> &nbsp;&nbsp;&nbsp;<input type=\"button\" id=\"btn5\" value=\"将雄起添加到上海上方\"> &nbsp;&nbsp;&nbsp;<ul id=\"city\"><li id=\"bj\">北京</li><li id=\"sh\">上海</li><li id=\"gz\">广州</li><li id=\"sz\">深圳</li></ul><ul id=\"desc\"><li id=\"jy\">加油</li><li id=\"xq\">雄起</li></ul>  <br><br><br><input type=\"button\" id=\"btn6\" value=\"将雄起删除\"> &nbsp;&nbsp;&nbsp;<input type=\"button\" id=\"btn7\" value=\"将描述列表全部删除\"> &nbsp;&nbsp;&nbsp;</body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 按钮一：添加一个span到div$(\"#btn1\").click(function(){let span = $(\"<span>span</span>\");$(\"#div\").append(span);});//按钮二：将加油添加到城市列表最下方$(\"#btn2\").click(function(){//$(\"#city\").append($(\"#jy\"));$(\"#jy\").appendTo($(\"#city\"));});//按钮三：将加油添加到城市列表最上方$(\"#btn3\").click(function(){//$(\"#city\").prepend($(\"#jy\"));$(\"#jy\").prependTo($(\"#city\"));});//按钮四：将雄起添加到上海下方$(\"#btn4\").click(function(){$(\"#sh\").after($(\"#xq\"));});//按钮五：将雄起添加到上海上方$(\"#btn5\").click(function(){$(\"#sh\").before($(\"#xq\"));});//按钮六：将雄起删除$(\"#btn6\").click(function(){$(\"#xq\").remove();});//按钮七：将描述列表全部删除$(\"#btn7\").click(function(){$(\"#desc\").empty();});</script>
3.操作样式

语法：

  • css(name) 根据样式名称获取css样式
  • css(name,value) 设置CSS样式
  • addClass(value) 给指定的对象添加样式类名
  • removeClass(value) 给指定的对象删除样式类名
  • toggleClass(value) 如果没有样式类名，则添加。如果有，则删除
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>操作样式</title><style>.cls1{background: pink;height: 30px;}</style></head><body><div style=\"border: 1px solid red;\" id=\"div\">我是div</div><input type=\"button\" id=\"btn1\" value=\"获取div的样式\"> &nbsp;&nbsp;<input type=\"button\" id=\"btn2\" value=\"设置div的背景色为蓝色\">&nbsp;&nbsp;<br><br><br><input type=\"button\" id=\"btn3\" value=\"给div设置cls1样式\"> &nbsp;&nbsp;<input type=\"button\" id=\"btn4\" value=\"给div删除cls1样式\"> &nbsp;&nbsp;<input type=\"button\" id=\"btn5\" value=\"给div设置或删除cls1样式\"> &nbsp;&nbsp;</body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 1.css(name)   获取css样式$(\"#btn1\").click(function(){alert($(\"#div\").css(\"border\"));});// 2.css(name,value)   设置CSS样式$(\"#btn2\").click(function(){$(\"#div\").css(\"background\",\"blue\");});// 3.addClass(value)   给指定的对象添加样式类名$(\"#btn3\").click(function(){$(\"#div\").addClass(\"cls1\");});// 4.removeClass(value)  给指定的对象删除样式类名$(\"#btn4\").click(function(){$(\"#div\").removeClass(\"cls1\");});// 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除$(\"#btn5\").click(function(){$(\"#div\").toggleClass(\"cls1\");});</script></html>
4.操作属性

如果属性值是true或false，建议使用prop()，编程更加方便

  • attr(name,[value])： 获得/设置属性的值。

    ​ attr(“属性名”,“值”) 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改

    ​ attr(“属性名”) 一个参数就是获取属性的值

  • prop(name,[value])： 获得/设置属性的值(checked，selected)

    ​ prop(“属性名”,“值”) 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改

    ​ prop(“属性名”) 一个参数就是获取属性的值

  • removeAttr(),removeProp() 删除指定的属性
    jq对象.removeAttr(“src”)
    jq对象.removeProp(“href”)

<body><input type=\"text\" id=\"username\"><br><input type=\"button\" id=\"btn1\" value=\"获取输入框的id属性\">  &nbsp;&nbsp;<input type=\"button\" id=\"btn2\" value=\"给输入框设置value属性\"><br><br><input type=\"radio\" id=\"gender1\" name=\"gender\">男<input type=\"radio\" id=\"gender2\" name=\"gender\">女<br><input type=\"button\" id=\"btn3\" value=\"选中女\"><br><br><select><option>---请选择---</option><option id=\"bk\">本科</option><option id=\"zk\">专科</option></select><br><input type=\"button\" id=\"btn4\" value=\"选中本科\"></body><script src=\"js/jquery-3.3.1.min.js\"></script><script>// 1.attr(name,[value])   获得/设置属性的值//按钮一：获取输入框的id属性$(\"#btn1\").click(function(){alert($(\"#username\").attr(\"id\"));});//按钮二：给输入框设置value属性$(\"#btn2\").click(function(){$(\"#username\").attr(\"value\",\"hello...\");});// 2.prop(name,[value])   获得/设置属性的值(checked，selected)//按钮三：选中女$(\"#btn3\").click(function(){$(\"#gender2\").prop(\"checked\",true);});//按钮四：选中本科$(\"#btn4\").click(function(){$(\"#bk\").prop(\"selected\",true);});</script>

4000

赞(0) 打赏
未经允许不得转载：爱站程序员基地 » jQuery框架_01_快速入门
标签：

相关推荐

热门文章

热门标签

源码 (2093)Java开发 (1438)Python开发 (1301)vps商家 (1289)阿里云盘 (1267)夸克网盘 (1266)Linux (1189)JavaScript (1119)PHP开发 (1058)计算机网络 (1055)MySQL (1015)Go语言 (985)UI/UE (975)CSS (970)人工智能 (933)Shell (930)安卓 (891)Android开发 (873)C# (861)ASP (815)网站架构 (798)IOS开发 (782)JQuery (759)Oracle (684)网络资源 (575)实用工具 (267)微信 (250)C语言/C++ (245)百度网盘 (208)github (132)