Jquery和JS的区别
2024-09-07 14:40:04
<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script> //引入Jquery
<style type="text/css">
#d1
{
font-size:24px;
}
.list
{
width:200px;
height:30px;
text-align:center;
line-height:30px;
vertical-align:middle;
background-color:#999;
color:#F00;
}
</style>
</head> <body> <div id="d1" name="div" ><b>第一个DIV</b></div> <div class="d">22222</div>
<div class="d">333333</div>
<div class="d">444444</div> <div class="list">hello</div>
<div class="list">world</div>
<div class="list">hai</div>
<div class="list">aaaa</div> <input type="text" bs="uid" /> <input type="checkbox" id="aa" value="hello" /> <input type="button" id='btn' value="取值"/> </body>
<script type="text/javascript"> //JS取元素,取出来的是具体的元素对象
//var d = document.getElementById("d1");
//alert(document.getElementsByClassName("d"));
//alert(document.getElementsByTagName("div"));
//alert(document.getElementsByName("uid")); //操作内容
//alert(d.innerText); //获取文本内容
//alert(d.innerHTML); //获取HTML代码
//d.innerText = "hello"; //给元素赋值(文本)
//d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值(HTML代码) //d.value 获取或者设置表单元素的内容 //操作属性
//alert(d.getAttribute("name")); //获取属性的值
//d.setAttribute("bs","001"); //设置属性
//d.removeAttribute("name"); //移除属性 //操作样式
//alert(d.style.fontSize); //获取样式,必须是写在元素里面的
//d.style.fontSize = "36px"; //修改设置样式 $(document).ready(function(e) { //Jquery取元素,取出来的是jquery对象
//var d = $("#d1"); //根据ID找
/*var d = $(".d"); //根据CLASS找 for(var i=0;i<d.length;i++)
{
alert(d.eq(i));
}*/ //alert($("div")); //根据标签名找 //alert($("[bs=uid]")); //根据属性找 //操作内容
//alert(d.text()); //获取元素的内容(文本)
//alert(d.html()); //获取元素的内容(HTML代码) //d.text("hello"); //给元素赋值(文本)
//d.html("<span style='color:red'>hello</span>"); //给元素赋值(HTML代码) //d.val(); //操作表单的内容,可以取值赋值 //操作属性
//alert(d.attr("name")); //获取属性
//d.attr("bs","001"); //设置属性
//d.removeAttr("bs"); //移除属性 //操作样式
//alert(d.css("font-size")); //取样式
//d.css("font-size","36px"); //设置样式 //事件
/* $("#d1").click(function (){ alert("aa"); })*/ /* $(".d").click(function(){ //alert($(this).text()); })*/ //菜单选中
$(".list").click(function(){ //让所有元素变为非选中状态
$(".list").css("background-color","#999").css("color","#F00"); //让该元素变为选中状态
$(this).css("background-color","#60F").css("color","#FFF"); }) //取checkbox选中值
$("#btn").click(function(){ if($("#aa")[0].checked)
{
alert($("#aa").val());
}
else
{
alert("未选中!");
} }) }); </script>
</html>
最新文章
- Join Attributes
- Linux C 开发环境配置
- [转载]Context and Interception : The .NET Context
- 01Spring_基本jia包的导入andSpring的整体架构and怎么加入日志功能
- redsocks 配合iptables设置全局sockts5代理
- 2016年11月9日 星期三 --出埃及记 Exodus 19:25
- How Do I Deploy a Windows 8 App to Another Device for Testing?
- poj 2299 逆序数
- js实时监听input中值的变化
- HTC与英特尔联手打造无线VR解决方案
- Concurrency Is Not Parallelism (Rob pike)
- Mac 配置Charles,抓取移动设备数据
- Linux中安装python3
- div 绑定keyup
- Vivado SPI Flash程序下载
- 算术平均数 print(&#39;arithmeticAverageSingleCompressionRatio:&#39;, sum(singleCompressionRatio)/len(singleCompressionRatio))
- flask中cookie,session的存储,调用,删除 方法(代码demo)
- TJU Problem 1065 Factorial
- 上手 Kubernetes
- Java基础之Calendar类、JNDI之XML