JQUERY - 技术教程文章
jQuery加载与选择器【代码】
1、jQuery引入以及写法 //不能再jQuery的引入标签中写js代码 <script type="text/javascript" src="jquery文件的位置"></script> <script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1');alert('原生javasctipt'+oDiv);}//ready的完整写法$(document).ready(function(){var $div = $('#div1');alert('jquery弹出的'+$div);})//ready的缩写$(function(){var $div = $('#div1');ale...
jQuery和dom的区别与互相转化、jQuery与原生js的入口函数区别和jQuery（）函数介绍【代码】【图】
目录 如何进行相互转换 jQuery入口函数的多种写法 jQuery入口函数和js原生入口函数的区别 jQuery（）/$() jQuery（function（）{}） jQuery（字符串） jQuery（dom节点）首先jQuery（）相当于是一个一个函数，通常用jQuery（）来选中dom对象，然后$可以替换jQuery，即可以用$()。然后dom节点上原生的方法和jQuery对象上的方法是不能交换使用，所以我们要知道如何进行互相转换（以下jQuery都可以用$符号替换）。 如何进行相互转换 $...
jquery使用ajax获取数据实例【代码】
利用jquery封装的ajax获取实例，以下是html代码，放入.html文件中可以直接执行，设备必须连接网络，以获取网络资源。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding: 0;margin: 0;}body,select,input,button,textarea{font: 14px/26px PingFangSC-Regular,Tahoma,"Microsoft Yahei",sans-serif,Arial}a:link, a:visited {color: #333;text-decoration: ...
jQuery前端开发学习指南(08)——jQuery基本过滤选择器【代码】【图】
版权声明 本文原创作者：谷哥的小弟作者博客地址：http://blog.csdn.net/lfdfhl基本过滤选择器概述 很多时候，我们需要将匹配到的元素再进行过滤；故，会用到过滤选择器。首先，我们来学习基本过滤选择器。 首元素选择器 :first获得选择的元素中的第一个元素 尾元素选择器 :last获得选择的元素中的最后一个元素 非元素选择器 :not(selector)获取不包括指定内容的元素 偶数选择器:even获取索引值为偶数的元素，索引从 0 开始计数 奇...
jQuery的遍历【代码】
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。 1. 原始方式遍历 语法 for(var i=0;i<元素数组.length;i++){元素数组[i]; }代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {v...
Vue项目如何引入JQuery详细步骤【代码】【图】
用vue-cli脚手架工具构建项目成功后 如果需要引入JQ，步骤如下： 1、在Jquery官网下载：https://jquery.com/download/ 2、首先在项目中找到在package.json文件，在package.json里做如下操作： 注意：看自己下载的版本号来写！3、在终端里输入npm install jquery –save-dev 也可以是cnpm install jquery –save-dev 注意：jquery 一定要小写 不然会提示 Please use ‘jquery’ (all lowercase)! 4、(1)在项目中找到 build文件夹下...
前端11Jquery用ajax获取数据赋值给页面
https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.asp jQuery 参考手册 - DOM 元素方法 【jQuery】使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url参数为请求加载json格式文件的服务器地址，可选...
jQuery设置input的disable属性，prop和attr的区别【代码】
<form:radiobuttons path="isInsuredCasualty" class="input-xxlarge" items="${fns:getDictList(yes_no)}" itemLabel="label" itemValue="value" htmlEscape="false"/>//获取input的disable属性 true false $("input[name=isInsuredCasualty]").is(":disabled")//判断input是否选中 $("input[name=isInsuredCasualty]").is(":checked")//设置input的disable为true 不能选 $(input:radio[name="isInsuredCasualty"]).prop("disabl...
jquery实现大文件分片上传的方法
这里只写后端的代码，基本的思想就是，前端将文件分片，然后每次访问上传接口的时候，向后端传入参数：当前为第几块文件，和分片总数 下面直接贴代码吧，一些难懂的我大部分都加上注释了： 上传文件实体类： 看得出来，实体类中已经有很多我们需要的功能了，还有实用的属性。如MD5秒传的信息。 public class FileInf { public FileInf(){} public String id=""; public String pid=""; public String pidRoot...
jQuery live和on的区别
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。 在获取数据时 live()方法 在执行事件之后 才获取数据 on()方法 在执行事件之前 就能获取到数据 所以on一般用在不是动态生成的html控件上面，而live方法用在动态生成的按钮上面。
jQuery操作DOM元素【代码】
操作DOM节点文本操作$('#test-ul li[name=python]').text();//获得值$('#test-ul li[name=python]').text('设置值');//设置值 $('#test-ul').html();//获得值 $('#test-ul').html('<strong>123</strong>');//设置值css的操作 $('#test-ul li[name=python]').css("color","red")元素的显示与隐藏：本质 display：none； $('#test-ul li[name=python]').show() $('#test-ul li[name=python]').hide()娱乐测试 $(window).width() $(wi...
原生js图片上传 jquery【代码】
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="format-detection" content="telephone=no"><title>测试</title><style type="text/css">.userInfo{margin-top: 52px;width: 94%;margin-left: 3%;background-color: white;border-radius: 12px;display: flex;flex-direction: column; } .userHeader{position: relative; } ....
Wab开发——jQuery进阶【代码】
jQuery进阶 动画效果基本效果滑动效果淡入淡出 事件Jquery的文档操作添加删除修改 validate插件正则表达式 动画效果 基本效果 show(speed,fn);显示 speed:速度，“slow”,“normal”,"fast"或者毫秒数 fn:回调函数,动画执行完毕后，自动执行该函数 hide(speed,fn);隐藏 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="jQuery.js" type="text/javascript" charset="utf-8"></script><script type=...
jquery购物车【代码】
html构建主题页面 <body><div class="head"><ul><li><input type="checkbox" class="all"> 全选</li><li class="good">商品</li><li>单价</li><li>数量</li><li>小计</li><li>操作</li></ul></div><div class="goods w"><div><input type="checkbox" class="select"></div><div class="food"><div class="pic"><img src="images/零食1.png"><h3>百草味泡椒去骨鸭掌(酸辣味)125g肉类休闲零食鸭爪卤味网红小吃</h3></div><div class=...
jquery 上传图片到服务器（file 文件流）【代码】
// file 是取到的文件流function uploadImage(file) {let formData = new FormData();formData.append("file", file);formData.append("otherParams", "otherParams");return new Promise((resolve, reject) => {$.ajax({type: "post",url: "/user/fileDetail/open/uploadFile",processData: false,contentType: false,// headers: headers,data: formData,success(res) {resolve(res);},error(error) {reject(error);},});});}
jQuery实现论坛发帖Demo【代码】【图】
目录效果展示思路代码改进空间 效果展示思路 主要知识点：运用jQuery对HTML元素节点的操作(append)来添加帖子。 交互设计：用户点击页面上的“论坛发帖”按钮，出现表单，填写表单后点击“发帖”按钮，jQuery获取表单内容，创建新的节点（头像随机）来合成一个“帖子”，最终插入到当前页面的结尾。 代码 完整代码如下： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=devic...
JQuery实现简单的国际象棋棋盘【代码】【图】
介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考 <!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}ul,li {list-style: none}li {width: 100px;height: 100px;float: left;border: 1px solid black;box-sizing: border-box;}#container {width: 300px;height: 300px;margin: 100px auto;border: 2px solid black;}</style><script src="../../../.....
JS第十三章-jQuery事件流【图】
JS第十三章-jQuery事件流 jQuery事件处理 .on(事件，方法) 默认是冒泡 可以绑定多个事件 事件对象 事件本身的属性 event.type 获取事件的类型event.target 获取触发该事件的节点对象 事件类型例子： 入参event事件，解析不同的事件类型，做不同的动作
jquery操作ajax【代码】【图】
高度封装 $.get和 $.post: $.get(http://127.0.0.1:8000/ajax,function(data){alert(data);})$.post(http://127.0.0.1:8000/ajax,function(data){alert(data);}) 底层封装$.ajax：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="https://code...
个人笔记之jQuery的获取内容或属性【代码】
个人笔记之jQuery的获取内容或属性 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body><p id="test1">超级变变变</p><p id="test2">大大变</p><button id="btn...
jquery 文本上下滚动【代码】【图】
【jQuery插件】textSlider 文本滚动jQuery.textSlider.js ;(function($) {$.fn.textSlider = function(settings) {settings = jQuery.extend({speed: "normal",line: 2,timer: 1000}, settings);return this.each(function() {$.fn.textSlider.scllor($(this), settings);});};$.fn.textSlider.scllor = function($this, settings) {var ul = $("ul:eq(0)", $this);var timerID;var li = ul.children();var _btnUp = $(".up:eq(0...
day56-js原生事件绑定-jQuery导入、查找标签【代码】
文章目录 每日测验昨日内容回顾BOM与DOM操作今日内容概要原生js事件绑定jQuery针对导入问题 如何查找标签基本选择器组合选择器/分组与嵌套基本筛选器属性选择器表单筛选器筛选器方法每日测验 """ 今日考题 1.列举你所知道的PEP8 Python编码规范 2.求结果(易错题)v1 = 1 or 3v2 = 1 and 3v3 = 0 and 2 and 1v4 = 0 and 2 or 1v5 = 0 and 2 or 1 or 4v6 = 0 or Flase and 1 3.简述字符编码发展史，以及你所知道的字符编码，每个字符编...
Jquery中Ajax和bootstrap的前端分页详写【代码】【图】
一、 1.进入https://v3.bootcss.com/的基本模板中粘贴Bootstrap 页面2.在body中添加内容，在script标签上面，分成块 <body> <div class="container"><h2>系统公告客户端设计实现(Bootstrap+jquery)</h2> </div> <div><div><h2>内容列表区</h2><table class="table"><thead><tr><th>序号</th><th>标题</th><th>类型</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td colspan="6">数据正在加载中</td></...
jQuery【代码】【图】
jQuery介绍 jQuery api速查表：https://jquery.cuishifeng.cn/ 概念： JavaScript 和查询（Query） 辅助 JavaScript 开发的 js 类库。 核心思想： write less,do more(写得更少,做得更多) 实现了很多浏览器的兼容问题。 流行程度： 最流行的 JavaScript 库 在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。 好处：jQuery 是免费、开源的 jQuery 的语法设计可以使开发更加便捷例如操作文档对象 选择 DOM 元...
jQuery【代码】【图】
jQuery 1.介绍目的：简化JavaScript对HTML DOM操作。是一个JS库，里面有很多函数（操作dom,事件处理，动画，ajax）。免费开源，小巧87k,兼容各类浏览器，文档齐备。 dom对象和jQuery对象。例子见**E:\Study-Webdevelope\codes\2020华电培训作业\project\jQuer学习笔记**dom对象(操作dom属性方法)：使用js创建的对象，js对象（dom对象），var obj = document.getElementById(“name”);obj为dom(js)对象。 jquery对象(操作jquery库...
jQuery操作下拉框select【代码】【图】
获取select值 html结构添加select <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head><body><select id="selector"><option value="1">选项一</option><option value="2">选项二</option><option value="3">选项三</option><option value="4">选项四</option></select> </body> <script> </script></html...
前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器【代码】【图】
表单校验与正则表达式 表单校验正则表达式表单选择器 JQuery系列至此完结撒花~~ 表单校验submit()的返回值会决定表单是否真正提交，如果 返回值是true则提交，false则不提交。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("#myForm").submit(function(){var $uname = $("#u...