jQuery与js获取文本框的值以及调方法的区别
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript">
// window.οnlοad=function(){
// //找到按钮
// var b=document.getElementById("btna");
// //给按钮增加点击事件 匿名函数
// b.οnclick=function(){
// //拿文本框的值
// var a=document.getElementById("aa").value;
// alert(a);
// }
//
// }
</script>
<!-- 引入js=jquery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面载入函数 相当于window.onload
$(document).ready(function(){
//案例1
// var b=$("#btnb");//拿到按钮
// b.click(function(){//添加点击事件
// var a=$("#aa").val();
// alert(a);
// })
//二 选择器
//2.1基本选择器-层次选择器
// $("#xx").css("background","red");单个属性
//$("#yy").css({"background":"red","color":"pink"});多个属性
//$("*").css("background","pink");//所有页面 通配符
// $("p,span").css("background","red");并集
// $("div span").css("background","red");交集 所有的后代
//$("div>span").css("background","red");父子关系
//$("p+span").css("background","red");兄弟
//2.3 过滤选择器
// $("ul>li:first").css("background","red");第一个
// $("ul>li:last").css("background","red");最后一个
//$("ul>li:eq(-3)").css("background","red");倒数 下标 找指定位置
// $("ul>li:odd").css("background","red");// 奇数下标 偶数行
//$("ul>li:even").css("background","red");//偶数下标 奇数行
//$("ul>li:gt(0)").css("background","red");大于 不包括自己
//$("ul>li:lt(4)").css("background","red"); 小于 不包括自己
//$("ul>li:lt(4):gt(2)").css("background","red"); //先小于再大于 不包括自己
//案例5 隔行换色
// $("table tr:even" ).css("background","pink");
// $("table tr:odd" ).css("background","red");
//2.4 表单选择器
$("#ok").click(function(){
拿性别
var sex=$("myForm input:radio:checked").val();
console.info(sex);
拿爱好
var ah=$("#myForm input:checkbox:checked").each(function(){
console.info($(this).val());
})
拿地址
var dz= $("#myForm select option:selected").val();
console.info(dz);
})
})
</script>
</head>
<body>
<h2>jQuery入门以及选择器</h2>
<h3>一，入门</h3>
<h4>1.1点击按钮弹出文本框的值(js与jQuery对比)</h4>
<input type="text" id="aa"/>
<input type="button" value="点击(纯js方式)" id="btna"/>
<input type="button" value="点击(jquery方式)" id="btnb"/>
<h3>二·选择器</h3>
<h4>2.1 基本选择器</h4>
<div id="xx">
<p> 这是第一个div <span>呕董：asd</span></p>
<span>大炮:siad</span>
</div>
<div class="yy">
这是第二个div
</div>
<p> 这是外面的div</p>
<span>路边的野花</span>
<h4>2.3 过滤选择器</h4>
<ul>
<li>0-A</li>
<li>1-B</li>
<li>2-C</li>
<li>3-D</li>
<li>4-E</li>
</ul>
<h4>案例5</h4>
<table border="1" width="%50">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<h4>2.4 表单选择器</h4>
<form action="" id="myForm">
性别：<input type="radio" value="男" name="1"/>男
<input type="radio" value="女" name="1"/>女<br>
爱好：<input type="checkbox" value="打篮球"/>打篮球
<input type="checkbox" value="触发"/>触发
<input type="checkbox" value="打豆豆"/>打豆豆<br>
地址：<select name="" id="">
<option value="湖南省">湖南省</option>
<option value="湖北省">湖北省</option>
<option value="海南省">海南省</option><br>
</select><br>
<input type="button" id="ok" value="确定"/>
</form>
</body>
</html>
jQuery与js获取文本框的值以及调方法的区别相关推荐
- html获得文本框的值,jQuery中怎么获取文本框的值？
jQuery中怎么获取文本框的值?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jQuery中获取文本框值的方法 下面就结合简单的代码示例,给大家介绍j ...
- php 取html文本框的值,jQuery中怎么获取文本框的值
jQuery中获取文本框的值方法:首先新建文件,并使用script标签在当前页面引入[jquery.min.js]文件:然后使用input标签创建文本框,并设置其id为myinput:最后给butto ...
- js 获取文本框的值 并传输到指定位置
<body> <div id="app"> <input type="text" id="a&q ...
- js获取文本框的值在控制台输出
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html获取文本框的值,如何获取输入框的内容
js如何获取input输入框中输入的值 直接使用.value属性即可获取输入框的内容. 详细的步骤如下: 首先获取输入框对应的DOM元素,如: var bt=document.getElementBy ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script> function get1() { document.getElementById("tx ...
- php中怎样获取文本框的值,jQuery如何获取文本框的值？
本篇文章将给大家介绍如何使用jQuery获取文本框的值,希望对需要的朋友有所帮助! 下面就结合简单的代码示例,给大家介绍jQuery获取文本框值的方法介绍. HTML代码示例如下: 如何使用jQuer ...
- java如何获取单框的值_javaWeb获取文本框的值
javaWeb获取文本框的值 [2021-02-01 21:11:36] 简介: php if不等于空的判断方法:首先通过"$_POST['content'];"获取文本框的内容 ...
- 使用JavaScript获取文本框的值方法
使用JavaScript获取文本框的值方法 第一种方法: 重点看<a onclick="add()">获取值</a> 在script中对应的是标签id的值, ...
最新文章
- 这26个阿里 Java 开源项目，你用过几个？
- R可视化删除ggplot2图中的网格线（Gridlines）
- 2017，SAP向云看齐
- centos7 VNC-Server-6.7.2
- 深入解读 MySQL 架构设计原理，剖析存储架构选型核心
- 11个程序员最常犯的MySQL错误（PHP开发）
- 人工智能数学基础之概率论
- 利用脚本设置本机IP地址
- excel如何删除空白行_QA|表单数据如何导入、导出？
- office 2021安装教程+下载
- python实现粒子滤波目标跟踪_QT+Opencv粒子滤波算法实现视频目标跟踪——如何选择跟踪算法...
- iOS 人脸识别Demo
- HTML5前端开发实战03-网上花店网页制作
- 60天申请软件著作权
- 电脑无线网卡安装不了驱动怎么办？
- c++定义结构体队列
- apfs扩容_小米2020pro增强版 黑苹果 最新教程
- 餐厅点餐系统设计思路
- python实现匿名发邮件_Python里实现发送邮件的方法
- Vulkan Cookbook 第七章 1 将GLSL着色器转换为SPIR-V组件