jquery基础
(一)、下载jquery库,地址:http://jquery.com/
(二)、jquery基础
一、jQuery对象转化成DOM对象
1、利用数组下标的方式读取到jQuery中的DOM对象
2、通过jQuery自带的get()方法
var $div = $('div'); //jQuery对象
var divObject1 = $div[1]; //方式1:转换成DOM对象
var divObject2 = $div.get(2); //方式2:通过get方法,转换成DOM对象
divObject1.style.color = 'red'; //操作dom对象的属性
divObject2.style.color = 'green'; //操作dom对象的属性
二、DOM对象转化成jQuery对象
如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
var div = document.getElementsByTagName('div'); //dom对象
//将dom节点div转化为$div的jquery对象
var $div = $(div);
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
(三)、基础选择器
1、id选择器,id= "test" — — $("#test")/$('#test')
2、class选择器,class = "test" — — $(".test")
```
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的,所以得到的是一个合集;需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入class;class选择器可以选择多个元素
$('.aaron').css("border", "3px solid red");
</script>
```
3、元素标签,比如<p> — — $("p")
4、* 选择器(取走全部铅笔) — — $("*")
$("form *") //表示取表格form下所有子元素
5、多种多个并列使用(sele1,sele2,seleN选择器)
$(".red,.green,#blue")
6、选择某标签类型的某class
$('div.myClass') // 选择class为myClass的div元素
二、层级选择器
parent,child层次选择器;通过层次选择器,可以快速定位某一层次的一个或多个元素,
6、$("ancestor descendant");选取ancestor元素里所有descendant(后代)元素。如:$("p label") //表示p元素下所有label层
7、$(“parent > child”),相当于一个家庭中的子辈们,但不包括孙辈
8、$(“prev + next”),通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素(选取紧接在prev元素后的next元素),格式如下:
9、$(“prev ~ siblings”),使用prev ~ next选择器,获取<p>元素后面相邻的全部元素(选取prev元素之后的所有siblings元素)
(四)、过滤性选择器
1、:first过滤选择器
2、:eq(index)过滤选择器
小例子:
<ol>
<li>葡萄</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>苹果</li>
</ol>
$("li:last").css("background-color", "red");//最后一个
$("li:eq(0)").css("background-color", "red");//第一个
$("ol").find("li").eq(2).css("background-color", "red");//第三个
3、:contains(text)过滤选择器,按照文本内容来查找一个或多个元素
比如:$("li:contains('西瓜')")
4、:has(selector)过滤选择器
<ol>
<li><p>我是P先生</p></li>
<li><label>L妹纸就是我</label></li>
<li><p>我也是P先生</p></li>
<li><label>我也是L妹纸哦</label></li>
<li><p>P先生就是我哦</p></li>
</ol>
<script type="text/javascript">
$("li:has('label')").css("background-color", "blue");//法一
// $("li>label").css("background-color", "blue");//法二
// $("li label").css("background-color", "blue");//法三
// $("li:has(label)").css("background-color", "blue");//法四
// $("label").css("background-color", "blue");//法五
// $("li:contains('L')").css("background-color", "blue");//法六
</script>
5、:hidden过滤选择器,$("p:hidden"),选择器获取不可见的<p>元素
6、:visible过滤选择器,$("p:visible"),获取的是全部可见的元素
7、[attribute=value]属性选择器
比如:$("li[title='水果']"),选择title属性为水果的li
$('input[name=first]') // 选择name属性等于first的input元素
8、[attribute!=value]属性选择器,属性选择器的功能是获取不包含属性名
9、[attribute*=value]属性选择器,获取属性值中包含某一指定内容的全部
比如:$("li[title*='果']")选择所有有果字段的元素
10、:first-child子元素过滤选择器,第一个子元素
11、:last-child子元素过滤选择器,最后一个元素
//可以通过子类选择器 p:first-child 筛选出每一个dd中的的第一个a元素
$("p:first-child").css('color','#9932CC');
//把a元素从顺序1-5加上颜色
//可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素,注意了index是从0开始计算,所以选在1-5,为对应的index就是4
$("a:lt(4)").css('color','red');
//在所有a元素中找到属性名name="setColor"的元素,并设置颜色
//这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
$("a[name='setColor']").css('color','blue');
//选中2个dd列表中第10个元素,并改变颜色
//这里用了nth-child 选择的他们所有父元素的第n个子元素
$("dd a:nth-child(10)").css('color','#66CD00');
//找到把a元素中包含文字"更多"的节点,改变颜色
$("a:contains('更多')").css('color','#C71585');
(五)、对结果进行过滤筛选
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
(六)、表单选择器
a、表单选择器
1、:input表单选择器,返回全部的表单元素
b、与type类型有关的表单**选择器
2、:text表单文本选择器,可以获取表单中全部单行的文本输入框元素
3、:password表单密码选择器,获取表单中全部的密码输入文本框元素
4、:radio单选按钮选择器,获取表单中的全部单选按钮元素
5、:checkbox复选框选择器,获取其中的全部复选框元素
6、:submit提交按钮选择器,获取表单中的这个提交按钮元素
7、:image图像域选择器,获取其中图像全部元素
8、:button表单按钮选择器,获取其中的全部按钮元素
c、状态有关
9、:checked选中状态选择器,可以获取处于选中状态的全部元素。
10、:selected选中状态选择器,只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素
(七)、操作DOM元素
1、使用attr()方法控制元素的属性, 设置或者返回元素的属性
$("#a1").attr("href","www.imooc.com");//设置
var $url = $("#a1").attr("href");//返回
2、html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。
3、addClass()和css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
$("#content").css({"background":"#ff0000","color":"White"});
4、removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
5、使用append()方法向元素内追加内容
6、使用appendTo()方法向被选元素内插入内容,使用格式是:$(content).appendTo(selector)
7、使用before()和after()在元素前后插入内容,用格式分别为:
$(selector).before(content)和$(selector).after(content)
8、使用clone()方法复制元素,格式:$(selector).clone()
9、replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容
如: <span class="green" title="hi">我是屌丝</span>
<script type="text/javascript">
var $html = "<span class='red' title='hi'>我是土豪</span>";
$($html).replaceAll(".green");
</script>
10、使用wrap()和wrapInner()方法包裹元素和内容,前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
11、使用each()方法遍历元素,
例如,遍历页面中的<span>元素,当元素的序列号为2时,添加名为“focus”的样式,如下图所示:
12、使用remove()和empty()方法删除元素,remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。
(八)、事件和应用
1、页面加载时触发ready()事件,ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的:
$(document).ready(function(){})等价于$(function(){});
2、使用bind()方法绑定元素的事件,bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:
$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
3、
4、
5、
(九)、常用的工具方法
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象,合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。
参考:
1、http://www.imooc.com/code/64
2、《JQuery设计思想》http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html