jQuery 基础
2016-09-25 22:03
267 查看
一、安装jQuery
去jq官网下载jq文件,然后添加到代码里:<script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
在代码中添加这一句,就引入了js库jq.
jq有两份版本,后缀分为.js和.mim.js,后者时压缩版,压缩版时删除了不必要的空行和空白,比较难读,但是体积非常小,当许多页面用到jq的时候可以用压缩版的。
当不知到你适合选择哪一个jq的时候可以用条件注释来选择:
<span style="white-space:pre"> </span><!--[IF lt IE 9]> <span style="white-space:pre"> </span><script type="text/javascript" src="/js/jquery-3.1.1.js"></script> <span style="white-space:pre"> </span><![endif]--> <span style="white-space:pre"> </span><!--[if gte IE 9]><!--> <span style="white-space:pre"> </span><script type="text/javascript" src="jquery-2.0.2.js"></script> <span style="white-space:pre"> </span><!--<![end if]-->
二、理解jq的$函数
$函数时Jq函数的简写形式,全写是:jquery(选择的dom),因为别的js里面有$符号,可以使用jQuery.noConflict();函数放弃$符号;也可以自定义别的简写符号来代替$,如:var jq = jQuery.noConflict();就可以用jq代替$符号了。三、jq主函数的参数
$(function) 等dom就绪后才执行的函数$(selector) $(selector,context) 从页面中选择元素
$(HTMLElement) $(HTMLElement[])选择一个html元素护着一组html元素
$() 选择0个元素
$(HTML) $(HTML, map) 基于html代码片段生成新元素,支持科选的Map对象参数,利用它定义新元素的属性
四、选择元素
使用上下文限制搜索范围如:
<span style="white-space:pre"> </span>$("img:odd"),<strong>$(".drow")</strong>.onmouseenter(function(e){ $(this).css("opacity",0.5); }).onmouseout(function(e){ $(this).css("opacity",1.0); });第二个选择是限制范围,也可以使用html元素当作选择的起点,如:
<span style="white-space:pre"> </span>var elem = document.getElementById('oblock'); $("img:odd"),$(elelm).onmouseenter(function(e){ $(this).css("opacity",0.5); }).onmouseout(function(e){ $(this).css("opacity",1.0); });
$函数选择元素时,返回的时0个或多个DOM元素。
jQuery对象有许多的方法和属性:
context 选择元素时使用的上下文对象
each( function ) 在每个选中元素上运行给定的function( 并返回function 修改后的jQuery对象)
get(index) 返回给定索引值对应的htmlelement对象
index( htmlelement) 返回给定htmlelement在Jq对象中的索引序号
index(selector)利用selector,返回选择sq中匹配selector元素的索引
length 返回jq对象中包含元素的个数
selector 返回选择器
size() 返回jq对象中包含元素的个数
toArray() 返回一个有Jq对象中包含的元素组成的element对象数组
五、事件处理
可以形成方法链,如:$("img:odd"),$(elelm).onmouseenter(function(e){ $(this).css("opacity",0.5); }).onmouseout(function(e){ $(this).css("opacity",1.0); });或者:
$("label").css("color","blue").css("font-size",".75em");
相关文章推荐
- jquery-1.9.1日历控件
- JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
- JQuery选择器
- jquery中的$("#id")与document.getElementById("id")的区别
- jquery 如何获取动态添加的元素
- jQuery css() 方法动态修改CSS属性
- jQuery——初学总结
- jquery attr()设置和获取属性值实例教程
- 关于学习jquery
- jquery获取复选框的值
- 关于对jQuery的了解
- Jquery的选择器
- jquery与php交互的方法,通过json格式
- jquery中的知识点
- jQuery 循环遍历对象/集合/数组
- jQuery验证表单插件——jquery-validation
- JQuery
- 使用JQery编写表格的动态增删
- jquery serializeArray()与serialize()的区别
- jquery即点即改