Jquery方法的应用

<body>

<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />

</body>

书写位置在JS代码中

书写格式：

$(document).ready(function(e) {

　　//JS方式
　　//1.根据ID取元素，DOM对象
　　//var div = document.getElementById("one");
　　//2.根据class取元素
　　//var div = document.getElementsByClassName("test");
　　//3.根据name取
　　//var bd = document.getElementsByName("uid");
　　//4.根据标签名取
　　//var div = document.getElementsByTagName("div");

　　//操作内容
　　//1.非表单元素
　　//alert(div.innerText);
　　//div.innerText = "aaaa";
　　//div.innerHTML;
　　//2.表单元素
　　//div.value

　　//操作属性
　　//div.setAttribute("","");
　　//div.removeAttribute("");
　　//div.getAttribute("");

　　//操作样式
　　//div.style.backgroundColor = "red";
　　//alert(div.style.color);只能获取内联样式

　　//在数组里面如果要取DOM对象使用索引的方式，如果要取Jquery对象使用eq()

　　//JQUERY方式
　　//1.根据ID取元素，Jquery对象
　　var div = $("#one");
　　//2.根据class取
　　//var div = $(".test");
　　//3.根据属性取
　　//var bd = $("[bs='aa']");
　　//4.根据标签名取
　　//var div = $("div");
　　//5.组合选取
　　//var div = $("div span");

　　//操作内容
　　//1.非表单元素
　　//alert(div.text());
　　//div.text("aaaa"); ——文本
　　//div.html(); —— html代码
　　//2.表单元素
　　//div.val("aaa");

　　//操作属性
　　//div.attr("属性名","属性值"); ——添加、设置属性
　　//div.removeAttr("属性名"); ——移除属性
　　//div.attr("属性名"); ——获取属性

　　//操作样式
　　//div.css("样式名","样式值"); ——添加样式
　　//div.css("样式名"); ——获取样式

　　//操作元素
　　//var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";

　　//div.append(str); //追加元素
　　//$("#a").remove(); //移除某个元素

　　$(".test").click(function(){
　　$(this).text();
　　})

　　绑定事件：
　　$(".test").bind("click",function(){

　　　　$(this).text();

　　});
　　取消绑定：
　　$("#btn").click(function(){

　　　　$(".test").unbind("click");

　　});

绑定事件：
　　$("#add").click(function(){

　　　　$(".test").bind("click",function(){

　　　　　　$(this).text();

　　　　});
　　});

});

</script>

巴特西

Jquery方法的应用

最新文章

热门文章