本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01jquery判断字符串是否为空-jquery设置input的value值

jQuery介绍

jQuery 是一个迅速，简约的 JavaScript 架构，是现在最受欢迎的 JavaScript 程序库，它是对 JavaScript 目标解析函数的封裝jQuery 的设计方案观念是 Write less, do more完成隔行掉色实际效果，JavaScript 要循环系统加分辨，而 jQuery 只需一句重要编码$("tr:even").css("background-color", "#ccc");

jQuery涵数

浏览和实际操作 DOM 原素操纵网页页面款式对网页页面事情开展解决拓展新的 jQuery 软件与 Ajax 技术性极致融合

jQuery能够做的一切JavaScript都能够做，可是应用jQuery能够进一步提高设计高效率。

jQuery优点

体型小，缩小后仅有 100 KB 上下强劲的选择符优异的 DOM 封裝靠谱的事故处理体制优异的网页兼容模式

jQuery使用方法

做为一个独立的js文件，jQuery不容易与别的js文件矛盾。

基本英语的语法概论。

$(selector).action();

加工厂$():将DOM对象变换为jQuery目标。

选择符:获得要实际操作的DOM原素。

action():jQuery中给予的方式，包含关联事故处理的方式“$”，等同于“jQuery”。

比如:

您好

alert($("p").text());

JQuery目标和DOM对象。

DOM对象和jQuery目标有一套单独的方式，不可以混合使用。

$("#title").html();// 相当于document.getElementById("title").innerHTML;

假如你要混和他们，你务必变换他们。

DOM 目标转 jQuery 目标// a 是 DOM 目标var a = document.getElementById("name");// b 是 jQuery 目标var b = $(a);jQuery 目标转 DOM 目标// a 是 jQuery 目标var a = $("#name");// b 是 DOM 目标var b = jqObject.get(0);

选择符

基本上选择符

基本上选择符包含标签选择器，类选择器，ID选择符，或且选择符，相交选择符和全局性选择符。

我国

我国

原油；给油；作出更高的勤奋

一万

原油；给油；作出更高的勤奋

// 标签选择器，得到全部的 p $("p").css("color","red"); // 类选择器 $(".jy").css("color","red"); // ID 选择符，更具有唯一性 $("#wan").css("color","red"); // 或且选择符 ".jy" 和 "#wan" $(".jy,#wan").css("color","red"); // 相交选择符，既是 h3 标识，又有着 ".jy" 的原素 $("h3.jy").css("color","red");

层级选择符

000

111

第一等位基因

p2

222

333

// 子孙后代选择符，忽视等级，选择全部子孙后代原素 $("#x p").css("color","red"); // 后代选择符，只选择子层的原素 $("#x>p").css("color","red"); // 邻近原素选择符，下一个相邻的弟兄原素 h3 $("#x h3").css("color","red"); // 平辈原素选择符，#x 原素以后的的全部弟兄原素 h3 $("#x~h3").css("color","red");

属性选择器

百度搜索新浪新闻网易游戏

检测1

检测2

// 选择有着 href 特性的原素 $("[href]").css("color","red"); // 选择有着 href=x 的原素 $("[href='x']").css("color","red"); // 选择 a 标识中 href 并不等于 x 的原素 $("a[href!='x']").css("color","red"); // 选择 href 特性以 www 开始的原素 $("[href^='www']").css("color","red"); // 选择 href 特性以 com 末尾的原素 $("[href$='com']").css("color","red"); // 选择 href 特性包括 a 的原素 $("[href*='a']").css("color","red"); // 选择有着 href 特性和 title 特性，而且 title=x 的 p 原素 $("p[href][title='x']").css("color","red");

过滤器选择符

选择

a b c d e // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red"); // 双数行的 li $("li:even").css("color","red"); // 单数行的 li $("li:odd").css("color","red"); // 字符为 2 的 li $("li:eq(2)").css("color","red"); // 字符超过 1 的 li $("li:gt(1)").css("color","red"); // 字符低于 2 的 li $("li:lt(2)").css("color","red"); // 应用转义符 $("#h2\\#x").css("color","red");

事情

鼠标事件

鼠标事件是当客户在文件上挪动或点击电脑鼠标时产生的事情。

// 点一下一下，转换相片 $("img").click( function(){ // this 是事情开启的根源 $(this).attr( "src","img/2.jpg" ); } ); // 挪动到原素上 $("img").mouseover( function(){ $(this).css( "border","2px solid red" ); } ); // 离去原素 $("img").mouseout( function(){ $(this).css( "border","2px solid white" ); } );

电脑键盘事情电脑键盘事情

每每客户按住或释放出来键盘上的某一键时，便会转化成一个事情。

$("input").keyup( function(){ // 获得框中的值 var str = $(this).val(); // 将 h3 原素中的文字內容更改成 str $("h3").text( str ); } );

表格事情

当一个原素得到聚焦点时，它将开启一个聚焦点事情，当它失去焦点时，它将开启一个模糊不清事情。

账户:

电話:

// 得到聚焦点（激话/点一下一下） $("#a").focus(function(){ $(this).val("); }); // 失去焦点（未激活/未点一下） $("#a").blur(function(){ $(this).val("输入您账号..."); });

鼠标悬停复合型事情。

hover()方式等同于mouseover和mouseout事情的组成。

$("img").hover( function(){ $(this).css("border","5px solid red"); }, function(){ $(this).css("border","5px solid white"); } );

持续点一下复合型事情$(“img”)。悬停(function(){ $(this))。css("外框"，" 5px纯红")；}，function(){ $(this)。css("外框"，" 5px纯白色")；} );持续点击复合型事情。

挑选

a b c d e $("h2").click(function(){ // 持续点一下，ul 的由此可见和掩藏开展转换 $("ul").toggle(); });

事情的动态性关联。

为dom原素撰写关联事情的另一种方式。

关联一个事情$(".del").on('click', function() { alert('hello');})关联好几个事情$(".del").on('click mouseover', function() { alert('hello');})

掩藏和表明原素。

变更原素的间距和相对高度(含有动漫实际效果)。

show(speed)：表明hide(speed)：掩藏toggle(speed) 等额的于 show hide：表明的掩藏，掩藏的表明

可选速率主要参数特定掩藏/表明的速率，能够选用下列值:“慢”，“快”或ms。

div{ width: 200px; height: 200px; background-color: black; } 表明 掩藏 转换 $("#btn1").click(function(){ $("div").show('slow'); }); $("#btn2").click(function(){ // fast:迅速的 // slow:迟缓的 // ms：自定 $("div").hide(2000); }); $("#btn3").click(function(){ $("div").toggle(1000); });

变更原素的相对高度(拉申实际效果)。

slideDown(speed)：表明slideUp(speed)：掩藏slideToggle(speed) 等额的于 slideDown slideUp

可选速率主要参数特定掩藏/表明的速率，能够选用下列值:“慢”，“快”或ms。

$("#btn1").click(function(){ // 往下屈伸 $("div").slideDown(1000); }); $("#btn2").click(function(){ // 往上收拢 $("div").slideUp(1000); }); $("#btn3").click(function(){ // 转换 $("div").slideToggle(1000); });

不必变更原素的尺寸(渐变色实际效果)。

fadeIn(speed) 表明fadeOut(speed) 掩藏fadeToggle(speed) 等额的于 fadeIn fadeOut 动漫fadeTo(speed, 清晰度) 方式容许渐变色为给出的不透明度（值处于 0 与 1 中间）

可选速率主要参数特定掩藏/表明的速率，能够选用下列值:“慢”，“快”或ms。

$("#btn1").click(function(){ // 表明：放眼望去 $("div").fadeIn(1000); }); $("#btn2").click(function(){ // 掩藏：退出我的视野 $("div").fadeOut(1000); }); $("#btn3").click(function(){ // 转换 $("div").fadeToggle(1000); }); $("#btn4").click(function(){ // 1 秒内变为 50% 的清晰度 $("div").fadeTo(1000,0.5); });

传动链条

Chain容许好几个jQuery方式在同一个原素的一条句子中运作，而且能够将姿势/方式连接在一起。

比如，点击按键一次，让div进行4个特定的实际操作:

环境变粉字体样式变色往上收拢往下拉申 div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } 试一下 hello $("button").click(function(){ $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000); });

及其DOM和CSS的实际操作。

特性涵数

Attr ("attribute ")获得原素的特性值。

Attr(“特性”，“新值”)改动原素的特性值。

Attr (style parameter)款式主要参数可以用json文件格式撰写。

点此试一下 $("#btn1").click(function(){ $("img").attr("src","img/2.jpg"); $("img").attr("title","高清风景图"); $("img").attr({width:"200",height:"200"}); });

val() 得到表单元素中的 value 值$(“# BTN 1”)。点击(function(){ $(“img”)。attr("src "，" img/2 . jpg ")；$(“img”)。attr("文章标题"，"超清景观图")；$(“img”)。attr({总宽:“200”，相对高度:“200”})；});Val()获得表单元素中的值。

Val ("x ")改动表单元素中的值。

Html()获得原素(标识 文字)中的內容。

html(“x”)改动原素中的內容(标识 文字)。

Text()获得原素中的文字。

文字(“x”)改动原素中的文字。

试一下

去我国

$("button").click(function(){ // input 框中的值 alert($("input").val()); // 改动 input 框中的值 $("input").val("66666"); // 得到 div 中的內容（包括标识信息内容） alert($("div").html()); // 得到 div 中的內容（不包含标识信息内容，只包括文字內容） alert($("div").text()); // 改动 div 中的內容（所有内容都遮盖） $("div").text("祖国万岁！"); });

设计风格作用

Css(“特性”)获得特性值。

Css(“特性”，“值”)设定特性的值。

Css({json})设定好多个特性的值。

div{ width: 150px; height: 150px; background-color: #000; } 试一下 $("button").click(function(){ // 获得 css 特性，width 的值 var w = $("div").css("width"); // 一个键值对 $("div").css("background-color","pink"); // 链条式程序编写 $("div").css("background-color","pink").css("border-radius","50%"); // json 为主要参数 $("div").css({ opacity:"0.4", background:"orange", borderRadius:"50%" }); });

Width()获得原素的总宽。

总宽(数据)改动原素的总宽。

Height()获得原素的相对高度。

改动原素相对高度的相对高度(数据)。

div{ width: 150px; height: 150px; background-color: #000; } 试一下 $("button").click(function(){ //（无参）获得总宽 var w = $("div").width(); //（无参）获得相对高度 var h = $("div").height(); alert("宽:" w "px，高:" h "px"); //（传参）改动总宽 $("div").width("300"); //（传参）改动相对高度 $("div").height("300"); });

类款式涵数

AddClass()向原素加上类款式。

RemoveClass()清除原素的类款式。

ToggleClass()款式转换；是->并不是，并不是->是。

div{ width: 100px; height: 100px; background-color: #000; } .a{ background: palevioletred; border-radius: 50%; } .b{ border:5px dashed darkcyan; opacity: 0.6; } .cn{ background: #000; color: #FFF; font-family: 字魂49号-逍遥行书; } 试一下 撤销清晰度 款式转换

我国

$("#btn1").click(function(){ // $("div").addClass("a"); $("div").addClass("a b"); }); $("#btn2").click(function(){ $("div").removeClass("b"); }); $("#btn3").click(function(){ $("h1").toggleClass("cn"); });

连接点实际操作

检测 西游记原著 三国演义 水浒传原著 $("#test").click(function(){ var bookname = $("input").val(); // 根据工厂函数，建立新的 li 连接点 var newli = $("" bookname ""); /* 加上子连接点 */ // newli 加上到 ul 后边 $("ul").append(newli); // newli 加上到 ul 后边 newli.appendTo("ul"); // newli 加上到 ul 前边 $("ul").prepend(newli); newli.prependTo("ul"); /* 加上平辈连接点 */ // newli 加上到末尾的 li 的后边 $("li:last").after( newli ); newli.insertAfter("li:last"); //newli 加上到末尾的 li 的前边 $("li:last").before(newli); newli.insertBefore("li:last"); /* 更换连接点 */ // 将第二个 li 换成 newli $("li:eq(1)").replaceWith(newli); newli.replaceAll( "li:eq(1)" ); /* 拷贝连接点 */ // 拷贝第一个 li，并插进到最后一个 li 的后边 $("li:first").clone().insertAfter("li:last"); /* 删掉连接点 */ // 清除了通道上的文字（连接点并沒有消退） $("li:eq(1)").empty(); // 删掉连接点 $("li:eq(1)").remove(); });

解析xml连接点

先祖原素

往上解析xmlDOM树的方式。

parent() 回到被选原素的立即父原素，只是是上一级parents() 回到被选原素的全部先祖原素，它一路往上直至文本文档的根原素，能够挑选辈份

实验

a b c $("button").click(function(){ // 找爸爸 var x = $("b").parent().html(); // 找祖先 ul var x = $("b").parents("ul").html(); // 找祖先 body var x = $("b").parents("body").html(); alert( x ); });

对等原素

Next()获得紧接在配对原素后面的原素。

Prev()获得紧接在配对原素以前的原素。

sibs([选择符])获得配对原素前后左右的全部弟兄原素。

检测

第一等位基因

a b c

p2

p3

$("button").click(function(){ // 相邻的下一个原素 var x = $("ul").next().text(); // 相邻的上一个原素 var x = $("ul").prev().text(); // 全部的弟兄中 id=x 的 var x = $("ul").siblings("#x").text(); // ul 的全部弟兄：1 个 button，3 个 p，2 个 script var arr = $("ul").siblings(); for(var i = 0 ;i< arr.length ;i ){ alert(arr[i]); } });

子孙后代原素

小孩，小孙子，重孙这些。

children([selector]) 方式回到被选原素的那些立即子原素检测 a b c $("button").click(function(){ // 全部子连接点：a b c var x = $("ul").children().text(); // ul 中的第一个子连接点 var x = $("ul").children("li:first").text(); alert(x); });find(选择符) 方式回到被选原素的子孙后代原素，一路往下直至最后一个子孙后代检测 盘古开天 旱魃 战神刑天

水神共工

火神

$("button").click(function(){ // 在 ul 中搜索 p 原素，忽视等级 var x = $("ul").find("p").text(); // 在 ul 中搜索 h3 原素，忽视等级 var x = $("ul").find("h3").text(); // 不清楚找什么 var x = $("ul").find().text(); alert(x); });

原素的过虑。

First()挑选第一个原素。

Last()挑选最后一个原素。

Eq(index)挑选到含有数据库索引下标底原素。

非()原素。

Is()回到布尔值以明确它是不是那样的原素。

检测 盘古开天 旱魃 战神刑天 $("button").click(function(){ // 第一个 li var x = $("li").first().text(); // 最后一个 li var x = $("li").last().text(); // 字符为 1 的 li var x = $("li").eq(1).text(); // 除开字符为 1 的其他全部 li var x = $("li").not("li:eq(1)").text(); // 回到布尔型，li 的父节点是否 ul var x = $("li").parent().is("ul"); alert(x); });

状况

电子琴动画特效

dd { /* 掩藏原素 */ display: none; } 网址 应聘求职 1.个人简历 2.招聘面试 3.新员工入职 文化教育 1.播放视频 2.写作业 3.网上教学 自主创业 1.协助中小企业 2.头脑风暴游戏 3.赚钱啦 $("nav dt").click(function(){ // 全部的 dd 所有都合闭上，除开自身的弟兄 $("dd").not($(this).siblings()).slideUp(500); // 自身的弟兄开展转换，表明合闭上，合闭的表明出去 $(this).siblings().slideToggle(500); });

加入购物车清算

.minus,.plus{ border:1px solid #999; /* 网页链接 a 是行内元素 */ /* 变换成形内块表明，才可以更改宽和高 */ display: inline-block; width: 20px; height: 20px; text-align: center; text-decoration: none; } 商品编号 名字 价格 总数 总价格 1 炸香肠 3 - 1 3 2 王八 10 - 1 10 3 霸王龙 1000 - 1 1000

总价格:111提交订单。

car.js

$(".plus").click(function(){ // 得到原先的产品总数 var i = $(this).prev().text(); i ; // 如今的产品总数 $(this).prev().text(i); // 产品价格 var price = $(this).parent().prev().text(); // 产品总价格 var total = i*price; // 如今产品的总价格 $(this).parent().next().text(total); getTotal();});$(".minus").click(function(){ var i = $(this).next().text(); i--; // 总数早已是 0 了，了解客户是不是删掉该产品 if(i == 0){ if( confirm("是不是删掉该产品？") ){ $(this).parents("tr").remove(); } }else{ $(this).next().text(i); // 产品价格 var price = $(this).parent().prev().text(); // 产品总价格 var total = i*price; // 如今产品的总价格 $(this).parent().next().text(total); } getTotal();});// 测算全部产品的总价格// function getTotal(){// // 总价格// var sum = 0;// var arr = $("tr:not(tr:first)").find("td:last");// for(var i = 0;i