一.jquery通过选择器精准找到元素:
<style type="text/css"> div{padding:8px 0px;font-size: 12px;text-align: center;border:solid 1px #888;} </style> <script src="jquery-2.2.1.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function (){ $("div").html("Hello,welcome to jquery"); }); </script>
CLASS:
<style type="text/css"> .frame { border:solid red 1px ;font-size:13px;} .title { padding :6px ;background-color:#EEE;} .content { padding :8px 0px;font-size:12px;text-align:center;display:none;} .curcol { background-color:yellow;} </style> <script type="text/javascript"> $(function(){ $(".content").html("Hello,welcome to jQuery"); $(".title").click(function(){ $(this).addClass("curcol").next(".content").css("display","block"); }); }); </script> </head> <body> <div class="frame"> <div class="title">标题</div> <div class="content"></div> </div> </body>
ID:
<input id = "btnSubmit" type = "button" value = "submit" class = "btn" onclick = "btn_Click();" /><br/><br/>
$("#btnSubmit").click(function(){}
总结:
ID:$("#name")
CLASS:$(".name")
二.学习到的几个重要函数:
1. $(document).ready(function (){}) = $(function(){})
2.
$(".title").click(function(){ $(this).addClass("curcol").next(".content").css("display","block"); });
分析:$(".title")找到对应的元素,给他添加click监控器,接下来就是click的响应函数的内容:$(this).addClass("curcol").next(".content").css("display","block");
首先,这里的this是指调用这个函数的主体,也就是$(".title")这个元素,addClass函数的作用是给调用的元素添加一种样式,这里给$(".title")元素追加了“curcol”样式,这里对$(".title")元素的操作结束了,使用.next()函数转对其他元素进行操作。这里转对$(".content")元素进行处理。对$(".content")元素使用css()函数来对现有的css样式进行修改。
注:addClass 是追加样式,在现有的样式上面追加一些其他东西。
css 是对现有的样式进行修改
另外,$(this).toggleClass("new");是对元素样式的动态切换。比如:
$(".defcol").click(function(){//旧的样式名为old $(this).toggleClass("new"); })
一开始,defcol的样式名为“old”,当用户点击到defcol元素时,defcol元素抛弃了“old”元素,使用“new”样式,当用户再次点击defcol元素,defcol抛弃“new”样式,使用“old”样式。类似循环,动态切换。
3.
var oRdoValue=$("#Radio1").is(":checked")?"man":"woman";
如果Radio1被勾选,则oRdoValue的值是man,反之是woman
以上,就是进段时间对jQuery的入门摸索。