jQuery基础

<!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="../bootstrap/js/jquery-1.11.2.min.js"></script>
<style type="text/css">
#test{ width:100px;}
</style>
</head>

<body>

<div id="test" class="test">
aaaaa
</div>
<div class="test"></div>
<input id="biaodan" type="text" name="uid" aa="cc" />
<input type="checkbox" id="ck" />
</body>
<script type="text/javascript">

//JS方式
//找元素
//var a = document.getElementById("biaodan");
//var a = document.getElementsByClassName("test");
//var a = document.getElementsByName("uid");
//var a = document.getElementsByTagName("div");

//操作内容
//a.innerText = "你好"; //给元素里面加文本
//a.innerHTML = "<span style='color:red'>hello</span>"; //HTML代码
//a.value = "zhangsan"; //表单元素

//操作属性
//a.setAttribute("ming","zhi"); //添加属性
//a.removeAttribute("ming"); //移除属性
//a.getAttribute("ming"); //获取属性

//操作样式
//a.style.color = "";
//a.style.backgroundColor = "";
//alert(document.getElementById("test").style.width); //找样式只能找内联的

//Jquery方式
//找元素
//var d = $("#test"); //根据ID
//var d = $(".test"); //根据Class
//alert(d.eq(0));
//var d = $("[aa=cc]"); //属性选择
//var d = $("div"); //根据标签名

//操作内容
//var a = $("#test");
//a.text(); //操作文本
//a.html("<mark>hello</mark>"); //操作HTML代码
//a.append("<mark>world</mark>"); //追加
//$("#biaodan").val("zhangsan"); //表单元素的内容

//操作属性
//var a = $("#ck");
//a.attr("ming","zhi"); //设置属性
//alert(a.attr("class")); //获取属性
//a.removeAttr("class"); //移除属性
//a.prop("checked",true); //复选框选中

//操作样式
//var a = $("#test");
//a.css("background-color","red");
//alert(a.css("width"));

 


</script>
</html>

posted @ 2017-09-14 22:54  傻糊糊  阅读(151)  评论(0编辑  收藏  举报