JQuery基础2019-11-02 21:11:17 by冲冲 1、jQuery简介jQuery：轻量级、"写的少，做的多"、JavaScript函数库。2、jQuery功能HTML元素选取HTML元素操作HTMLDOM遍历和修改CSS操作HTML事件函数JavaScript特效和动画Ajax异步操作提供丰富的插件3、jQuery版本目前jQuery有三大版本：1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。2.x：不...
html<div id="container"><!-- Left side --><div id="left"> This is the left side‘s content! </div><!-- Right side --><div id="right"><!-- Actual resize handle --><div id="handle"></div> This is the right side‘s content!</div></div>cssbody, html {width: 100%;height: 100%;margin: 0;padding: 0; } #container {width: 100%;height: 100%;/* Disable selection so it doesn‘t get annoying */-webkit-touch-ca...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="jquery-1.4.4.js" type="text/javascript"></script> <script type="text/javascript"> $().ready( function() { $("#btn").bind("click",function() { var arr=new Array(...
网页上的头部固定，但不随滚动条滚动的效果，在百度贴吧里整理出来的网页特效，最开始的时候，固定条可以随滚动条拖动至网页顶部，但到达网页顶部后，再次拖动滚动条，头部并不滚动，其它的内容可以滚动，貌似在网上见的挺多的效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-e...
jquery使用模板动态添加html元素1、开发的时候有时候要循环加载list，通常我们在页面使用<c:foreach>标签循环加载后台传过来的数据。<c:forEach items="${srModel.bplbatchplanitem}" var="items" varStatus="s"><tr><td><input name="itemId" type="checkbox" value="${items.id}" mtype="${items.materialType}"></td><td>${items.attr1}</td><td>${items.materialCode}</td><td>${items.materialType}</td><td>${items.material...
1、引入JS文件和所需要的样式文件2、简单的写上以下18行代码就可以实现了$(document).ready(function() {$("div.tip_trigger a.img").hover(function() {$(this).parent(‘div.tip_trigger‘).css({‘background‘: ‘#8de08b‘,‘z-index‘: ‘1000‘});$(‘#h_coolsite .block‘).show();tip = $(this).siblings(‘.tip‘);tip.show();},function() {$(this).parent(‘div.tip_trigger‘).css({‘background‘: ‘none‘,‘z-ind...
1. siblings()这个方法，就是要取得调用该方法的节点对象的兄弟节点（查找同级对象）比如：<div id="aaa"><p>1</p><p>2</p><h1>2</h1><h2>22</h2><div>abcdefg</div></div>var curr = $("#aaa h1");curr.siblings(); //包括与p同级的所有元素：p, h1, h2, div如果带参数curr.siblings("p")那就只能取得到两个p2.图片轮流展示的效果function auto(){ i<$div.length-1?i++:i=0; $div.eq(i).show().siblings()...
jQuery是一个可订制的、轻量级的前端开发框架，它会让你的前端开发拥有无限的可能性。它会在敏捷Web开发中帮你做很多事情，比如简化HTML文档的解析、事件处理、动画效果和Ajax交互。实践上jQuery已经成为了新一代的标准。在这篇文章中，我们整理了9月份以来最新的15个jQuery插件， 它们都非常优秀。根据下面提到的这些jQuery插件，你可以在很多地方提高和优化Web应用的性能。我们希望你能从中找到对你有帮助的插件，如果你也知道很...
1.input 中加事件 onkeyup="return ValidateNumber($(this),value)" 2.ValidateNumber函数function ValidateNumber(e, pnumber) {if (!/^\d+$/.test(pnumber)) {$(e).val(/^\d+/.exec($(e).val()));}returnfalse;} 原文：http://www.cnblogs.com/xyangs/p/5390272.html
此方法用于在选择器的基础之上搜索查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止:如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提...
当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地简化，看完本文，你会发现，ajax，简单的来讲就是一句话的事情。本文重点是来讲讲jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去...
http://www.jb51.net/article/19342.htm在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态；这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。 第一种：改变disabled的boolean状态，具体代码及解释如下： 代码如下:$("button:eq(2)").click(function(){ var text2=$("input:text:eq(2)"); if(text2.attr("disabled")==false){ //通过设置disabled的boolean属性...
一、获取父级元素1、 parent([expr]):获取指定元素的所有父级元素<div id="par_div"><a id="href_fir" href="#">href_fir</a><a id="href_sec" href="#">href_sec</a><a id="href_thr" href="#">href_thr</a></div><span id="par_span"><a id="href_fiv" href="#">href_fiv</a></span>$(document).ready(function(){$("a").parent().addClass(‘a_par‘);});二、获取同级元素：1、next([expr])：获取指定元素的下一个同级元素（注意...
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div ></div><div ></div><div ></div><div ></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>(function($){$.fn.maxHeight = function(){var max = 0;this.each(f...
html与css:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 标签重定义 */ * { margin: 0; padding: 0; border: none; } body { background: #ddd; } img { border: none; } a { text-decoration: none; color: #444; } a:hover { color: #999; } /* wrap */ #wrap { position: relative; width:...