![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JQuery
陆老师Peter
高校计算机专业教师、项目经理、软件研发负责人。
展开
-
JQuery(1)——JQuery如何读
J Query分开读Query英音:['kwiəri] 美音:['kwɪrɪ]jQuery /ˈdʒeɪkwɪəri/j 亏儿瑞鸡块瑞jQuery就是J和Query分开读原创 2019-09-08 19:59:33 · 6986 阅读 · 0 评论 -
JQuery(20)——动态删除节点
1、remove()删除选择的节点。(1)案例:清空ul中的项,代码如下。 $(function() { $("#btnRemove").click(function() { $("#ulSite li").remove(); }); });<ul id="ulSite"> ...原创 2019-09-11 20:37:50 · 405 阅读 · 0 评论 -
JQuery(21)——补充:jQuery是完全按照JavaScript的语法写出来的JavaScript函数库
1、写代码的好习惯,{、(写完开始就写结束,省得忘了。在JQuery中这样写就不容易写错了。2、如果报错“例外被抛出”等,很可能是选择器表达式有问题,比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库,没有任何的魔法,任何看似怪异的写法都是很合法的JavaScript语法。JQuery就是一堆写好的Ja...原创 2019-09-11 20:45:42 · 135 阅读 · 0 评论 -
JQuery(22)——练习:十秒钟后协议文本框下的注册按钮才能点击、搜索框效果、动态创建评论、加法计算器
1、加法计算器。两个文本框中输入数字,点击【=】按钮将相加的结果放到第三个文本框中。attr(“”),val()。别问“jquery中怎么样把字符串解析为int”。2、十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。设置可用性等JQuery未封装方法:attr(“”)。别问jquery中怎么用定时器。3、练习:搜索框效果。焦点放入控件,如果文本框中的值是“请输入关键词”,那么将文本清空,...原创 2019-09-11 20:56:25 · 517 阅读 · 0 评论 -
JQuery(23)——节点操作
1、替换节点:$("br").replaceWith("<hr/>");将<br/>替换为<hr/>2、包裹节点:wrap()方法用来将所有元素逐个用指定标签包裹:$("b").wrap("<font color='red'></font>") 将所有粗体字红色显示。...原创 2019-09-15 23:58:48 · 110 阅读 · 0 评论 -
JQuery(24)——RadioButton操作
1、为什么特殊:因为只有Radio才是以一组为一个单位。2、取得RadioButton的选中值:$("input[name=gender]:checked").val() <input id="Radio2" checked="checked" name="gender" type="radio" value="男" />男 <inpu...原创 2019-09-16 00:06:38 · 2009 阅读 · 0 评论 -
JQuery(25)——事件
1、JQuery中的事件绑定:$(“#btn”).bind(“click”,function(){}),每次都这么调用太麻烦,所以jQuery可以用$(“#btn”).click(function(){})来进行简化。unbind。2、mouseover、mouseenter的区别:div里套div。代码见下面。和事件冒泡有关系。mouseenter是进入元素的的时候被触发,哪怕是进...原创 2019-09-16 00:21:03 · 96 阅读 · 0 评论 -
JQuery(26)——其他事件以及事件的属性
1、事件对象的方法:preventDefault()、stopPropagation()2、属性:pageX、pageY、target获得触发事件的元素(冒泡的起始,和this不一样)、which如果是鼠标事件获得按键(1左键,2中键,3右键)。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下,为bool值。keyCode、charCode属性发生事...原创 2019-09-16 00:28:33 · 107 阅读 · 0 评论 -
JQuery(27)——鼠标
1、获得发生事件时鼠标的位置:$(document).mousemove(function(e) { document.title = e.pageX + "," + e.pageY; });2、在mousemove、click等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息,比如对mousemove等鼠...原创 2019-09-16 00:35:56 · 125 阅读 · 0 评论 -
JQuery(28)——offset
1、元素的相对位置,案例:ImageCutter2、offset()3、获取匹配元素在当前视口的相对偏移。4、返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。5、案例:实现自绘ComboBox。...原创 2019-10-09 21:18:00 · 86 阅读 · 0 评论 -
JQuery(29)——动画
1、show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换:$(":button[value=show]").click(function() { $("div").show(); });$(":button[value=hide]").click(function() { $("div").hide(); });<div>哈哈哈哈哈哈...原创 2019-10-09 21:31:25 · 98 阅读 · 0 评论 -
JQuery(30)——复杂动画
1、animate:anmite内部设置的多个值是同步变化的,链式的animate是依次动画的。例子:animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。还可以指定增量,$(“#div1”).animate({ height: “+=10...原创 2019-10-09 21:44:39 · 172 阅读 · 0 评论 -
JQuery(31)——JQuery提供的函数
1、$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组。猜猜内部实现。例子,得到一个元素值是原数组值二倍的新数组:var arr = [3, 5, 9];var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。$.m...原创 2019-10-09 21:57:39 · 99 阅读 · 0 评论 -
JQuery(32)——常用JQuery插件
1、JQuery官方的UI控件 JQueryUIhttp://jqueryui.com/ 下发包 演示常用方法,分析代码。 表现和内容分离,语义化。2、JQuery.validate 表单验证插件。3、Form,用于为表单提供直接的Ajax能力。4、所有插件列表http://plugins.jquery.com/...原创 2019-10-09 22:02:42 · 130 阅读 · 0 评论 -
JQuery(33)——使用JQueryUI
使用JQueryUI1、引用jquery的css(注意不要忘了image文件夹)。2、引用jquery.js,引用jqueryui.js(如果想减小尺寸,可以引用单独的每个插件的js)。3、查看文档,根据说明使用,一般就是在ready里面加一句类似于$("#aa").draggle();“development-bundle\demos”是例子,development-bundle...原创 2019-10-09 22:44:46 · 146 阅读 · 0 评论 -
JQuery(34)——JQuery插件: JQuery cookie
一、JQuery插件: JQuery cookie1、什么是cookie:Cookie就是保存在浏览器上的内容,用户在这次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有的概念,只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。(不能在IE中...原创 2019-10-09 23:01:54 · 143 阅读 · 0 评论 -
JQuery(19)——动态创建Dom节点
1、使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中: var link = $("<a href='http://www.baidu.com'>百度</a>"); $("div:first").append(link);易错:还没有加到界面上,所...原创 2019-09-11 20:19:37 · 459 阅读 · 0 评论 -
JQuery(18)——选择器的相对定位
1、$(select,queryContext)2、siblings、next、children等方法都可以指定选择器。原创 2019-09-11 18:59:51 · 176 阅读 · 0 评论 -
JQuery(17)——元素的each
1、jQuery元素的也可以调用each方法,只是对$.each的简化调用。2、显示选中的复选框信息: $(function() { $("input[name=names]").click(function() { var names = $("input[name=names]:checked"); ...原创 2019-09-11 18:56:22 · 358 阅读 · 0 评论 -
JQuery(2)——JQuery简介
1、普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库(就像SqlHelper之于ADO.Net),比如Prototype、Dojo、ExtJS、JQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQue...原创 2019-09-08 20:23:21 · 116 阅读 · 0 评论 -
JQuery(3)——简单的JQuery
1、Dom中动态设置事件和静态设置。Jquery中一般习惯动态设置。$(document).ready(function() { alert("加载完毕!"); });//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。2、注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。3、当页面Dom元...原创 2019-09-08 20:30:53 · 93 阅读 · 0 评论 -
JQuery(4)——JQuery选择器
1、JQuery选择器用于查找满足条件的元素,比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象,相当于getElementById:$(“#div1”).html(“<font color=red>hello</font>”)语法、意义类似于CSS选择器。2、$就是函数。3、$("TagName")来获取所有指定标签名的jQuer...原创 2019-09-08 20:42:54 · 115 阅读 · 0 评论 -
JQuery(5)——jQuery对象、Dom对象
1、jQuery对象就是通过jQuery包装Dom对象后产生的对象:alert($('#div1').html())。Dom对象要想通过jQuery进行操作,先要转换为JQuery对象。2、$('#div1').html()等价于:document.getElementById("div1").innerHTML; 3、$('#div1')得到的就是jQuery对象,jQuery...原创 2019-09-08 21:04:46 · 89 阅读 · 0 评论 -
JQuery(6)——JQuery的迭代
如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:if ($("#btn1").length <= 0) { alert("i...原创 2019-09-08 21:22:48 · 320 阅读 · 0 评论 -
JQuery(7)——JQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML:alert($("#btn1").html());$("#btn1").html("hello");2、使用text()方法读取或者设置元素的innerText:alert($("#btn1").text());$("#btn1").text("hello");3、使用attr()方法读取或者设置元素...原创 2019-09-08 21:31:09 · 96 阅读 · 0 评论 -
JQuery(8)——节点遍历
1、next()方法用于获取节点之后的挨着的第一个同辈元素,$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素,$(".menuitem").nextAll("div")2、prev、prevAll兄弟中之前的元素。3、siblings()方法用于获取所有同辈元素,$(“.menuitem”).siblings(“li”)。sibli...原创 2019-09-09 21:51:28 · 159 阅读 · 0 评论 -
JQuery(9)——练习问题
1、鼠标放到图片上前面的右看、右边的左看。问题:表兄弟不是兄弟。$函数使用选择器的时候,如果没有传第二个参数,则是相对于整个dom树根的。如果传递第二个参数,则是相对于第二个参数的选择器。2、问题1:css("")参数能传递哪些东西?还是样式的名字,没特殊的。3、问题2:alert((“li”).text());为什么不是打印每一个?联想委托的组合。如何解决?用for循环或者each方法(...原创 2019-09-09 21:57:39 · 123 阅读 · 0 评论 -
JQuery(10)——css()函数、attr()函数、siblings、前面的所有的“后面的”
对于设置css、attr等这种本来不需要返回值的函数,jquery前面对象给返回。如果函数返回jquery对象数组(siblings),则后续是基于返回的数组进行迭代。如果函数返回值根本不是jquery对象数组(取innerHTML的html()),则无法继续迭代。前面的所有的“后面的” $(this).css("backgroundColor", ...原创 2019-09-09 22:10:41 · 230 阅读 · 1 评论 -
JQuery(11)——链式编程
高亮选中项:给所有有menuitem这个样式的元素添加click监听事件,当click的时候,向被点击的元素添加highlight这个样式,然后从其兄弟节点(siblings)中移除highlight风格。“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传,能不能正确传下来要看返回值,html()不能传,prevAll().nextAll()也传错。$("#ta...原创 2019-09-09 22:15:02 · 163 阅读 · 0 评论 -
JQuery(12)——基本过滤选择器
1、:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");2、:last 选取最后一个元素。$("div:last")选取最后一个<div>3、:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>4、:...原创 2019-09-09 22:21:08 · 142 阅读 · 0 评论 -
JQuery(13)——案例
1、todo:需求不太好,需要修改。第一行是表头,所以显示大字体(fontSize=30),最后一行是汇总,所以显示红色字体。正文的前三行是前三名,所以显示大的字体(28)表格的奇数行是黄色背景。2、用Dom实现;用JQuery实现。对比差异!3、源代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...原创 2019-09-09 22:23:48 · 106 阅读 · 0 评论 -
JQuery(14)——样式操作
1、常用样式:获取样式 attr("class")。 设置样式attr("class","myclass")。 追加样式addClass("myclass")(不影响其他样式)。 移除样式removeClass("myclass")。 切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass")。 判断是否存在样式:hasClass("myc...原创 2019-09-11 18:19:59 · 100 阅读 · 0 评论 -
JQuery(15)——过滤器:属性过滤选择器和表单对象选择器
1、属性过滤选择器:(属性过滤器用方括号括起来)$("div[id]")选取有id属性的<div> $(“div[title=test]”)选取title属性为“test”的<div>,JQuery中没有对getElementsByName进行封装,用$(“input[name=abc]”)。应用:获取所有的textbox $("div[title!=test]"...原创 2019-09-11 18:28:11 · 269 阅读 · 0 评论 -
JQuery(16)——表单选择器
1、$(“:input”)选取所有<input>、<textarea>、<select>和<button>元素。和$(“input”)不一样, $(“input”)只获得<input>。$("input,textarea,select,button")等价于$(":input")2、$(":text")选取单行文本框,等价于$(...原创 2019-09-11 18:52:23 · 105 阅读 · 0 评论 -
JQuery(35)——错误(易错点)
1、$(“document”)与$(document)。为什么$(“document”)不可以,因为没有document这个标签。为什么$(“body”)可以?因为有body标签。2、不要用attr设置背景颜色,分清属性和样式。$(“#btn1”).attr(“style”, “background-color:Red”);$("#btn1").css("backgroundCo...原创 2019-10-09 23:04:17 · 107 阅读 · 0 评论