当前位置: 代码迷 >> 综合 >> jQuery01--入门选择器
  详细解决方案

jQuery01--入门选择器

热度:98   发布时间:2023-12-06 08:27:54.0

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选择器:

  1. 基本选择器
  2. 层次选择器
  3. 过滤选择器
  4. 表单选择器

基本选择器(常用选择器)

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> ]