jQuer入门:
一,3W1H
二,jQuery选择器
3W:what?是什么 why?为什么要学习? where?哪些清况可以用?
1H:How?怎么样
What:Query是JavaScript的库,就是在里面封装了很多的Js代码 jQuery(90%)、ExtJs
why: 为了 简化JavaScript的开发
where:中大型网站开发,一些前端框架的基础,比如EasyUl,Bootstrap
How:工具:Hbuilder 使用步骤:①下载jQuery库 ②引入:将js文件复制到项目中 ③:使用
jQuery选择器:
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
基本选择器(常用选择器)
ID选择器:#ID
类选择器:.class
元素选择器:element
通配符:*
多个选择器(并集):selector1,selector2
多个选择器(交集):selector1 selector2
层次选择器
查找所有元素,查询子元素
过滤选择器
参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素:--:gt大于 --:lt小于
表单选择器
参考jQuery文档
获取单选框的值: --:enabled
HTML代码:
$("input:enabled")
<form><input name="email" disabled="disabled" /><input name="id" /> </form>
获取复选框的值
jQuery代码
$("input:checked")
<form><input type="checkbox" name="newsletter" checked="checked" value="Daily" /><input type="checkbox" name="newsletter" value="Weekly" /><input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> </form>
获取下拉框的值
jQuery代码
$("select option:selected")
<select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3">Trees</option>
结果:
[ <option value="2" selected="selected">Gardens</option> ]