在我们做web程序中,前后台代码的交互,显得尤为重要,如何拿到元素,如何拿到自己想要的元素的值更是很重要,因为经常使用,所以对jQuery常用的一些选择器进行了整理,方便查看阅读。不足之处也请留下建议。
通常在使用JQuery的过程中,我们使用它的别名$()来表示JQuery的命名空间,同时把调用的函数放在$()函数中;该函数其实就是$(“document”).ready()的简写。其实也就是相当于JS方法中的Window.Onload=function XX(){}的处理函数。
这里有个函数执行的先后顺序,$()方法要比window.οnlοad=function 方法先一步执行。
1. JQuery 选择某一个元素
一般jquery去选着某一个元素有三种方法,jquery对象和DOM对象是可以相互转换的因为他们所操作的元素都是DOM元素,只不过Jquery对象包含了多个DOM元素,而DOM对象本身就是一个DOM元素,简单说一下就是:JQuery对象是DOM元素的集合,DOM对象就是一个DOM元素。既然JQuery对象是DOM元素的集合,那判断JQuery对象是否有值,可用,可以用它的length属性的长度来判断。
1.1 把JQuery对象转化为DOM对象
因为JQuery对象和DOM对象所能调用的方法不能互通,如果想使用彼此的方法,就涉及到对象之间的转化。转化的方式有2种。
第一种:借助数组下标来读取JQuery对象集合中的某个DOM对象
这个是主要是对象之间的转化
<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
//js代码
<script>
$(function(){
var $li=$("li");//返回JQuery的对象 其实就是拿到文档中所有的li 将这个所有的li元素转化为一个JQuery对象
//的集合。至于这个jquery对象我们怎么判断 可以用length的属性去查看这个对象是不是存在。
var li =$li[0];//拿到jquery对象中下表为0的DOM对象,这就是返回了一个DOM对象。该li 就是指第一个li
alert(li.innerHTML);//输出内容
})
</script>
第二种:直接借助JQuery对象的方法,从JQuery对象中取出一个DOM对象。注意取出的是DOM对象。
利用JQuery对象的方法,从jquery对象中取出一个DOM对象
<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
<script>
$(function(){
var $li=$("li");//返回jquery对象
var li =$li.get(0);//利用get方法将下标为0的元素从JQuery对象中取出来,生成一个DOM对象。
alert(li.innerHTML);//输出内容
})
</script>
1.2把DOM对象转化为JQuery对象
使用方法:对于DOM对象来说,直接把它传递给$()函数即可,JQuery会自动把它转化为JQuery对象,然后就可以直接使用jQuery的方法。
<ul>
<li>这个是第一个</li>
<li>这个是第二个</li>
</ul>
<script>
$(function(){
var li=document.getElementsByTagName("li");//拿到所有的li元素
var $li=$(li[0]);//先拿到第一个li 方法就是li[0],将li[0]放在$()方法中,就获取到第一个li的jQuery对象。
alert($li.html());
})
</script>
//本方法中还可以将li整个放在$()方法中得到jQuery对象。 然后再用Jquery对象使用get()方法拿到Do对象。
//做到灵活运用其实不难,理解了方法就好。
选择器下一节写吧,想起什么来写点什么。。。。晚安