扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); 和 $("#id")[0].focus(); 第一个是增加onFocus()时间,一个是使DOM对象获得焦点。
成都创新互联坚持网页设计,我们不会倒闭、转行,已经持续稳定运营10年。专业网站设计公司技术,丰富的成功经验和创作思维,提供一站式互联网解决方案,携手广大客户,共同发展进步。我们不仅会设计网站,更会营销型网站。帮助中小型企业在“互联网+"的时代里通过推广营销传播路线转型升级,累计帮助多家客户实现网络营销化,与我们一起携手共创未来!
怎样可以在“jquery”让文本框获取焦点时改变背景颜色?
1、先使用jQuery选择器找到所有的文本框
2、为文本框注册获得焦点事件,即focus事件
3、在焦点事件的事件处理函数中对当前得到焦点的文本框设置背景色
4、注册失去焦点事件,即blur事件
5、在失去焦点的事件处理函数中对当前触发事件的文本框改变背景颜色script type="text/javascript" $(funct $("input:text").focus(function(){ //让当前得到焦点的文本框改变其背景色$(this).css("background","pink");}); //找到文本框,并注册失去焦点事件$("input:text").blur(function()//让当前失去焦点的文本框背景色变为白色$(this).css("background","white"); }); });/script
span id="myItem"选项卡/span
a id="myContent"这里是要显示在选项卡的内容/a
js:
jQuery("#myContent").click(function(){
var myContent = jQuery("#myContent").val();
//把a标签的内容显示在选项卡中
jQuery("#myItem").html(myContent) ;
//把a标签的内容显示在选项卡的title属性中
jQuery("#myItem").attr("title",myContent) ;
});
jquery提供了三个获得内容的方法有 text()、html() 以及 val(),其中前两个可用于解决本问题:
$("label#userid").text(); // 首选。
获取label的文本$("label#userid").html(); // 也可以实现。
获取label标签内的所有html标记,一般情况改下labe。
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口,具有高效灵活的css选择器,并且可对CSS选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
获取name为test的input文本框中的内容的jQuery代码为:
$("input:text[name='test']").val();
jQuery提供了三个简单实用的用于获取元素内容的方法:
text() —— 设置或返回所选元素的文本内容
html() —— 设置或返回所选元素的内容(包括 HTML 标记)
val() —— 设置或返回表单字段的值
因为input属于表单元素,所以获取其内容使用的是val()方法。
$("#输入框id").keyup(function(){
if(event.keyCode == 13){
//这里写你要执行的事件;
}
});
扩展资料:
JQuery简单的按钮点击和文本框输入事件
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%
%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
base href="%=basePath%"
titleMy JSP 'test.jsp' starting page/title
meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="This is my page"
!--
link rel="stylesheet" type="text/css" href="styles.css"
--
script type="text/javascript" src="script/jquery-1.8.3.min.js"/script
script type="text/javascript"
$(document).ready(function(){
$("#clickme").click(function(){
alert("Hello World click");
});
$('#clickmebind').bind("click", function(){
alert("Hello World bind");
});
$('#clickmeon').on('click', function(){
alert("Hello World on");
});
});
/script
script type="text/javascript"
//使用id的方式获取
$(document).ready(function(){
//1
$("#button_text1").click(function(){
var result1 = $("#input_text1").val();
alert("result1 = " + result1);
});
//2
$("#button_text2").click(function(){
var result2 = $("input[id='input_text2']").val();
alert("result2 = " + result2);
});
//3
$("#button_text3").click(function(){
var result3 = $("input[id='input_text3']").attr("value");
alert("result3 = " + result3);
});
//4. 可以通过type的值来获取input中的值(未演示)
/*
$("#button_text4").click(function(){
var result4 = $("input[type='text']").val();
alert("result4 = " + result4);
});
*/
//5. 可以通过name的值来获取input中的值(未演示)
/*
$("#button_text5").click(function(){
var result5 = $("input[name='text']").val();
alert("result5 = " + result5);
});
*/
});
/script
/head
body
h1根据ID来判定/h1
input type="button" name="clickmes" id="clickme" value="click me" /
input type="button" name="clickmebinds" id="clickmebind" value="clickme_bind" /
input type="button" name="clickmeons" id="clickmeon" value="clickme_on" /
!-- 获取文本框的值:方式一 --
div id="test1"
input id="input_text1" type="text" value="test1" style="width: 100px;" /
button id="button_text1"test1/button
/div
!-- 获取文本框的值:方式二 --
div id="test2"
input id="input_text2" type="text" value="test2" style="width: 100px;" /
button id="button_text2"test2/button
/div
!-- 获取文本框的值:方式三 --
div id="test3"
input id="input_text3" type="text" value="test3" style="width: 100px;" /
button id="button_text3"test3/button
/div
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流