jQuery简介
jQuery相当于将JavaScript封装好了,可以拿来直接用,强调写的更少,做的更多,但因为是封装好的半成品,有很多东西可能用不到,也突出了效率低的缺点
JavaScriptDOM取得的是一个对象
jQuery取得的是一个集合
JavaScript使用属性操作页面属性
jQuery使用方法操作页面属性
转换
jQuery转为DOM对象 $(“p”)[0]
DOM转为jQuery对象 $(DOM对象)
jQuery常用方法
注意点:使用jQuery时一定要导包,若使用js,且要在引用js前导包
页面加载完才执行方法
1
2
3
4$(function () { });
通过ID选择器获取标签名
1
2
3
4
5
6
7
8<span id="a">我是文本</span> <script type="text/javascript"> $(function () { var a=$("#a")[0].tagName; alert(a); }); </script>
类选择器
1
2$(".aa");
标签选择器
1
2$("span")
取得文本框value
1
2
3
4
5
6
7<script type="text/javascript"> $(function () { var a=$("#aa").val(); alert(a); }); </script>
给文本框赋值
1
2
3
4
5
6
7<input id="aa" type="text" value="kkk"> <script type="text/javascript"> $(function () { var a=$("#aa").val("bbb"); }); </script>
总结:操作文本可用text()方法,
操作css可用css()方法,
操作其他属性可用attr()方法,
无参数为取值,有参数为赋值,
若为多个值可用(“属性名”:“属性值”,“属性名”:“属性值”)
jQuery事件
实例:
1
2
3
4
5
6
7
8
9<input id="a" type="button" value="按钮"> <script type="text/javascript"> $(function () { $("#a").bind("click",function () { alert("成功触发事件"); }); }); </script>
1
2
3
4
5
6
7
8
9
10
11<span id="a">文字</span> <script type="text/javascript"> $(function () { $("#a").hover(function () { $(this).css("color","red"); },function () { $(this).css("color","blue"); }); }); </script>
submit提交事件
bind多次性可触发事件
one一次性触发事件
hover鼠标滑过事件
toggle多个事件
常用jQuery选择器
实例:
$(“span”:first)选中第一个
基本选择器
last选中最后一个
not排除什么
even选中偶数位,从下标0开始计数
odd选中奇数位
根据文字内容选择器
jQuery.contains(document.documentElement, document.body)
过滤选择器
$(“div”).children(".selected")
属性选择器
$(“input[type=button]”)
最后
以上就是认真大叔最近收集整理的关于JQuery初级入门的全部内容,更多相关JQuery初级入门内容请搜索靠谱客的其他文章。
发表评论 取消回复