JQuery
关注
分享
扫一扫
凌冰_
分享知识带给我的快乐！帮助他人就是帮助自己。
希望更多人能关注，来分享我的成果！
希望大家快快乐乐的学习，开开心心的畅游知识的海洋。
展开
-
Jquery 操作动态页面的数据提交到服务端处理
一、单击这个删除，弹出对话框，将选择的数据删除二、页面代码：动态获取数据，使用一个隐藏域保存！ <input type="hidden" name="uid<%=i%>" value="<%=user.getUserId()%>"/> <a href="#" class="removeUser"><img src="img/schu.png" alt="删除" title="删除"/></a><!--点击删原创 2020-12-05 09:23:32 · 267 阅读 · 0 评论 -
Jquery 实现购物车
购物车需求：1、 当全选选中时，所有商品的小复选框的选中状态跟按下的全选按钮保持一致；2、 当选中商品时，添加背景颜色；如果所有商品都被选中，就让全选按钮为选中状态；3、 可以点击 +或 - 来增加或减少商品数量，也可以直接在文本框修改数量，数量修改之后的小计也会相应改变；4、 可以进行删除单个商品、和选中商品以及清空购物车；5、 进行操作时，下面的已选商品件数以及总额也会有相应变化；默认：全选和改变数量效果删除选中的商品删除之后的效果JS...原创 2020-09-23 17:03:42 · 3564 阅读 · 0 评论 -
Jquery 中的扩展方法$.extend() 和$.fn.extend()
jQuery为开发插件提拱了两个方法分别是：· 1、jQuery.extend() or$.extend()函数用于将一个或多个对象的内容合并到目标对象； 语法：.extend( [deep ], target, object1 [, objectN ] ) 案例1：属性<body> <div id="box"></div> </body></html><scri...原创 2020-09-08 17:33:01 · 540 阅读 · 0 评论 -
JQuery 实现轮播图循环多张图片（二）
要求： 1、单击左边或右边滚动多张图片 2、鼠标悬停上左边或右边改变背景色 HTML页面 <body> <div id="box"> <!--左边--> <div id="left"> </div> <!--图片--> <div id="imgs"> <ul class="aa"> <l...原创 2020-09-08 17:13:24 · 2621 阅读 · 0 评论 -
JQuery 实现轮播图（一）
要求： 1、每隔3秒换一张图片，循环播放； 2、鼠标悬停上显示图片，时钟停止；离开鼠标，时钟启动； 3、单击左边或右边显示图片，时钟不停止；HTML页面<body> <!--焦点图--> <div class="banner"> <div class="my"> <!--图片--> <ul class="slide_box "> <li clas...原创 2020-09-08 17:06:22 · 351 阅读 · 0 评论 -
Jquery 使用Ajax读取Json的数据!
效果:HTML: <div id="div1"> </div> <div id="div2" > </div> <div id="div3"> </div> <div id="div4"> </div>CSS: body { background: wheat; } #div2 p { margin: 0px; posi原创 2020-09-04 17:49:34 · 203 阅读 · 0 评论 -
Jquery 实现Text文本框中文字移动到外部
原来：实现效果：单击文本框中就将“用户名”移动到外面哦！ <div class="y_same_item"> <input class="ysame_input" type="text" _input="" value="" id="userName"> <span class="y_same_label">用户名</s...原创 2019-12-13 17:44:10 · 230 阅读 · 0 评论 -
jQuery trigger()事件使用
一、常用事件 在页面加载完成时 自动触发input的点击事件，在移动端可以实现自动弹出输入法，获得焦点 $("input:first").trigger("click").focus(); <label for="textfield"></label> <input type="text" name="textfield" id=&原创 2018-06-20 16:35:22 · 538 阅读 · 0 评论 -
jQuery css和显示隐藏及siblings使用
主要操作技能：http://www.runoob.com/jquery/jquery-tutorial.htmljQuery 操作 CSS 1>addClass() - 向被选元素添加一个或多个类 （先指定类样式） 2>removeClass() -从被选元素删除一个或多个类 （先指定类样式） 3>css() - 设置或返回样式属性...原创 2018-12-05 16:55:27 · 2025 阅读 · 0 评论 -
JQuery HTML5 验证表单
HTML5新增属性验证表单内容<body> <!-- HTML5验证的特性 ：required="required"必填 number,url,email,search.... --> <form action="#" method="post"> <input type="search" id=&原创 2019-01-11 17:20:38 · 1072 阅读 · 3 评论 -
Jquery .position和offset区别
说明： position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。 offset()始终返回相对于浏览器文档的距离，它会忽略外层元素 1》jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置; 语法：$(selector).offset...原创 2019-01-02 15:48:32 · 621 阅读 · 0 评论 -
Jquery scrollTop() 和scrollLeft()使用
1》scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。当滚动条位置位于最顶部时，位置是0； 语法： $(selector).scrollTop()、$(selector).scrollTop(position) 参数position ： 规定以像素为单位的垂直滚动条位置。案例：<body> <div style="border:1px...原创 2019-01-02 16:06:46 · 5632 阅读 · 0 评论 -
Jquery 广告图片轮播切换
要点： 1、鼠标移至图片上出现左右箭头，鼠标移出图片时，左右箭头消失 2、单击左右箭头时，显示上一个/下一个图片，当前数字背景为橙色，其他数字背景为#333333，第一个/最后一个图片显示时，单击箭头时继续显示轮播图片 3、定时1秒换一张图片，轮播出图片，直到最后一张时换第一张轮播，依次类推。 4、鼠标移至图片上，定时就消失；鼠标移出图片，定时就开始轮播图片。...原创 2019-01-03 11:01:45 · 5345 阅读 · 2 评论 -
Jquery 在JQuery3.3.1版本中使用attr()复选框全选无效！
注意: 在JQuery3.3.1版本 使用 $('[type=checkbox]:checkbox').attr('checked', true); 单击按钮无效哦！ 那么使用： .prop()获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。Contents:.prop( proper...原创 2019-01-15 11:48:13 · 534 阅读 · 0 评论 -
JQuery 实现注册表单校验
进行表单数据的验证可谓是很有必要的，我们都会在网页上先进行一下表单验证，然后服务器端再次进行验证，来确保用户提交数据的准确性,与减轻服务器的压力. 表单页面： <body> <form action="index.html" method="get"> <p>tel:<input type="text" name=&qu原创 2019-01-09 16:30:05 · 1313 阅读 · 0 评论 -
Jquery 实现下拉列表三级联动
需求: (1) 根据 省、获得市、 (2) 通过市，再获得到县， (3) 每个下拉框数据都由一个数组组成; 效果：初始页面加载省份通过选择省份，获得对应的市再通过市，获得对应的区HMTL代码：<body> 省份：<select id="selProvin...原创 2019-01-15 15:57:23 · 2060 阅读 · 0 评论 -
jquery detach()和remove()的区别
remove：移除节点- 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据- 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据detach：移除节点- 移除的处理与remove一致- 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来$(document).read原创 2017-07-03 13:38:57 · 402 阅读 · 0 评论 -
jQuery 新的事件绑定机制on的使用技巧
从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。on(events,[selector],[data],fn)$(elements).o转载 2017-07-03 11:37:31 · 249 阅读 · 0 评论 -
jquery 动态添加的元素，用on事件
事件语法：.on( events [, selector ] [, data ], handler(eventObject) ) 在选定的元素上绑定一个或多个事件处理函数。 events 类型: String 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".m原创 2017-07-03 11:30:38 · 331 阅读 · 0 评论 -
jQuery常用事件处理
如下所示事件： 1）鼠标悬停或离开事件 $(function(){ //鼠标悬停上变化的颜色 $("li").mouseover(function(){ $(this).addClass("bg"); }); //鼠标离开上变化的颜色 $("li").mouseout(function(){ //从所有原创 2016-03-18 10:58:08 · 369 阅读 · 0 评论 -
jQuery对象相互转换成DOM对象
一、什么是jQuery对象？ 就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuer方法。 使用$()函数进行转化：$(DOM对象)vartxtName =document.getElementById("txtName"); //DOM对象var $txtNam原创 2016-03-09 17:18:46 · 432 阅读 · 0 评论 -
JQuery 获取select中的Text和Value
Query获取Select选择的Text和Value: 名称： AA CC QQ 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发原创 2016-05-03 12:13:44 · 283 阅读 · 0 评论 -
JSON的简单应用
一、什么是 JSON ？JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性，更易理解JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析* JSON 使用 JavaScript 语法来描述数原创 2016-07-05 16:35:13 · 258 阅读 · 0 评论 -
JSON详解
一、什么是 Json？ JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。在数据传输数据过程中，传递的只是一种符合Json语法格式的字符串，归根到底，传输的还是字符串。在web应用程序开发中，可以通过json实现前台与后台之间的数据交换。 JSON建构有两种结构： json原创 2016-07-05 16:04:40 · 469 阅读 · 0 评论 -
jQuery - serialize() 方法
一、定义： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。二、语法：$(selector).serialize()三、如何使用： （1）单击按钮提交数据原创 2016-07-06 09:56:15 · 470 阅读 · 0 评论 -
JQuery 层次选择器
在DOM元素之间的层次关系主要包含元素的后代元素、子元素、相邻元素和兄弟元素等HTML的结构: 姓名: 密码: 性别: 男 女 地址: 1.（ancestor descendant）在给定原创 2016-10-09 14:44:39 · 262 阅读 · 0 评论 -
JQuery 可见性过滤器
HTML页面结构: 12-hidden34-hidden5 CSS样式/* 层的大小,背景色,左浮动,外边距5px,内边距5px,边框 */div { width:75px; height:40px; background: #99F; margin:5px; float:left; border:2px solid g原创 2016-10-09 16:46:32 · 336 阅读 · 0 评论 -
JQuery 内容过滤选择器
HTML页面结构:contains(text) empty has(selector) parent 内容过滤选择器Test ResignJIMD MartinMalcom Test SinclairM.OhnHas p:contains(text) 选取含有文本内容为"text"的元素$("#a1").click(function(){ //查原创 2016-10-09 15:58:37 · 346 阅读 · 0 评论 -
JQuery 基本过滤选择器
HTML页面结构:first last not even odd eq(1) gt(1) lt(1) header(h1-h6) animated :first选取第一个元素 $("#a1").click(function(){ $("input:first").css("border","2px solid blue"); });原创 2016-10-09 15:27:05 · 399 阅读 · 0 评论 -
JQuery ajax()使用提交表单数据
HTML页面结构： 姓名: 密码: JS：$(function(){ //1)获取表单的参数来传值 $("#btn1").click(function(){ $.ajax({ type:"POST", url:"my", data:"uname="+$("[name='uname']").val()+"&upass="+$("[name='upass']原创 2016-10-10 17:21:02 · 1267 阅读 · 0 评论 -
jQuery focus和blur事件
Html页面结构: 会员登录 用户名 密 码 JS $(function(){ // $("#uname").focus(function(){ $(this).addClass(原创 2016-10-11 17:18:15 · 472 阅读 · 0 评论 -
jquery stop()停止当前所有动画效果
stop()函数用于停止当前匹配元素上正在运行的动画。stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为:jQueryObject.stop( [ queueName ] [, clearQueue [, jumpToEnd ] ] )其中，两个可选项参数clearQueue和goToEnd都是布原创 2016-10-12 16:37:04 · 2248 阅读 · 0 评论 -
jQuery find和filter的区别
首先 我们看.find()方法：现在有一个页面，里面HTML代码为;程序代码div class="css"> p class="rain">测试1p>div>div class="rain"> p>测试2p>div>如果我们使用find()方法：var $find = $("div").find(".rain");al转载 2016-10-13 16:20:29 · 283 阅读 · 0 评论 -
Jquery Ajax传递到Servlet中文是乱码？？
jquery Ajax传递到Servlet中文是乱码？？解决如下：（1）在js中对需要的传送的参数进行编码encodeURI(encodeURI(param))如： url:"users?uname="+encodeURI($(this).val()),（2）在服务器接受后对其进行解码String param =原创 2016-10-16 18:07:01 · 474 阅读 · 0 评论 -
jQuery 过滤器选择器
一、过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。 按照不同的过滤规则，过滤选择器可以分为以下几种： 1、基本过滤选择器 2、内容过滤选择器 3、可见性过滤选择器 4、属性过滤选择器 5、子元素过滤选择器 6、表单对象属性过滤选择器1.1原创 2016-03-16 15:15:09 · 350 阅读 · 0 评论