2017.7.14 学习笔记 JQ选择器的使用及JS输入框事件及获取其相对属性值
来源：互联网 发布：移动端手风琴效果 js 编辑：程序博客网 时间：2024/06/05 17:03
<!DOCTYPE html">
<html>
<head>
<meta charset=utf-8">
<title>JQ简化js代码的语言</title>
<script type="text/javascript">
</script>
</head>
<body>
<!-- 隐藏所有p标签元素 为所有p标签添加颜色-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); //隐藏所有p标签元素
// $("p").css("background-color","red"); //为所有p标签添加yanse
});
});
</script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">点我隐藏所有p标签元素</button>
<input type=submit name="submit1" value="登陆"> <br><br><br>
<!-- AJAX-----异步刷新
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。-->
<!-- 遍历each-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script><!--路径/jquery/jquery.js-->
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
<!-- 组合选择器-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function testD(){
var classArr = $("div,span,p,myclass");
$.each(classArr,function(i,div){
alert("第" + ++i + "个元素：" + $(div).html());
});
}
</script>
<input type="button" value="点我呀01" onclick="testD()"/>
<!-- 查询form下所有的input元素-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function testE(){
var classArr = $("form > input");//如果元素中间是空格就只是找他的儿子，如果是大于，就是找出他的子子孙孙
$.each(classArr,function(i,obj){
alert("第" + ++i + "个元素：" + $(obj).val());
});
}
</script>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input type="button" value="点我呀02" onclick="testE()"/>
<!--选择器总结
总结：以逗号隔开的选择器找出来的是数组，
以空格 隔开的选这起找出来的是第一个标签下的第二个标签下的子子孙孙，
以>符号隔开的连个选择器只找到所有儿子，
以+号链接的两个栓择期是在第一个选择器的下次找第二个选择器的紧接着第一个 ，结果不一定只有一个，也许是第一选择器数组
以~链接的两个的选择器是找第一个选择器下面的第二个选择器的所有兄弟。-->
</body>
</html>
//input标签中text 和 password 可以通过以下方法来判断是否为空 并且是否跳转
function Test01(){varflag =true;
var hh01=document.getElementById("qq");
var hh02=document.getElementById("ww");
//alert(hh01.value);
if(hh01.value==""){
alert("用户空");
flag=false;
}else if(hh02.value==""){
alert("密码空");
flag=false;
}
return flag;
}
<form action="https://www.baidu.com" onsubmit="return Test01()" onreset="Test03()">
1:<input type="text" id="qq" / ></br>
2:<input type="password" id="ww" /></br>
<input type="submit" value="登陆" />
<input type="reset" value="重置" />
</form>
//获取到属性输出到DIV中
//form表单对象的id属性
function getFormId(){
var loginForm = document.loginForm;
var id = loginForm.id;
document.getElementById("formId").innerHTML = "该表单的id属性：" + id;
}
//form表单对象的name属性
function getFormName(){
var loginForm = document.loginForm;
var name = loginForm.name;
document.getElementById("formName").innerHTML = "该表单的name属性：" + name;
}
//form表单对象的method属性
function getFormMehtod(){
var loginForm = document.loginForm;
var method = loginForm.method;
document.getElementById("formMethod").innerHTML = "该表单的method属性：" + method;
}
//form表单对象的action属性
function getFormAction(){
var loginForm = document.loginForm;
var action = loginForm.action;
document.getElementById("formAction").innerHTML = "该表单的action属性：" + action;
}
//form表单对象的length属性
function getFormLength(){
var loginForm = document.loginForm;
var length = loginForm.length;
document.getElementById("formLength").innerHTML = "该表单有" + length + "个表单域";
}
//form表单对象的elements属性
function getFormElements(){
var loginForm = document.loginForm;
var array = loginForm.elements;
var message = "该表单的表单域：<br>";
for(var i = 0;i < array.length;i++){
message += "第" + (i+1) + "个表单域：type=" + array[i].type + ",id=" + array[i].id +",name=" + array[i].name +",value=" + array[i].value + "<br>";
}
document.getElementById("formElements").innerHTML = message;
}
<input type="button" value="获取form表单对象的id属性" onclick="getFormId()"/>
<input type="button" value="获取form表单对象的name属性" onclick="getFormName()"/>
<input type="button" value="获取form表单对象的method属性" onclick="getFormMehtod()"/>
<input type="button" value="获取form表单对象的action属性" onclick="getFormAction()"/>
<input type="button" value="获取form表单对象的表单域个数" onclick="getFormLength()"/>
<input type="button" value="获取form表单对象的表单域" onclick="getFormElements()"/>
<div id="formId" style="color: green;font-size: 20px;font-weight: bolder;"></div>
<div id="formName" style="color: green;font-size: 20px;font-weight: bolder;"></div>
<div id="formMethod" style="color: green;font-size: 20px;font-weight: bolder;"></div>
<div id="formAction" style="color: green;font-size: 20px;font-weight: bolder;"></div>
<div id="formLength" style="color: green;font-size: 20px;font-weight: bolder;"></div>
<div id="formElements" style="color: green;font-size: 20px;font-weight: bolder;"></div>
- 2017.7.14 学习笔记 JQ选择器的使用及JS输入框事件及获取其相对属性值
- 2017.7.14 学习记录 JavaScript 输入框的事件及获取属性值
- 刚开始系统学习JS 关于JS模拟JQ部分选择器的个人看法及代码
- 使用js获得元素的属性值及事件名
- jq 属性选择器及子元素过滤选择器
- jq选择器及方法
- jq其他属性操作及jq事件机制
- 单行、多行输入框，其属性及功能场景
- jQuery 之 （二）事件操作、jq对文档的操作、属性选择器使用
- jsp name属性相同的一组输入框input，输入其中一个值，其余值跟随改变事件监听代码
- js获取事件源及触发该事件的对象
- jq和js分别设置标签属性及样式
- [JS]: JS 常用事件及属性
- 类似评论、点评的JS标签选择功能（及jq动态绑定事件）
- jq如何获取文本值、输入值、属性值
- js、jq学习笔记
- jQuery选择器及事件
- c#利用反射轻松遍历类获取其所有属性及属性值
- Java线程池(1)--cachedTheadPool
- 守护进程
- 怎样理解多态
- 简单理解vue中el、template、replace元素
- JavaWeb学习总结(三十六)——使用JDBC进行批处理
- 2017.7.14 学习笔记 JQ选择器的使用及JS输入框事件及获取其相对属性值
- 千万级规模高性能、高并发的网络架构
- JavaWeb学习总结(三十七)——获得MySQL数据库自动生成的主键
- JavaWeb学习总结(三十八)——事务
- Handler里send和post方法的区别
- Drying POJ
- cogs [BOI2007]摩基亚Mokia CDQ 分治
- 引用新体验！
- cuda之线程分配
