【JavaWeb】1.JQuery

专栏目录

文章目录

• JQuery
• • 1. hello world
  • 2. 核心函数
  • 3. 区分
  • • 3.1 Dom
    • 3.2 jQuery
    • 3.3 jQuery对象本质
    • 3.4 转换
  • 4. 层级选择器
  • 5. 过滤选择器
  • • 5.1 基本过滤选择器
    • 5.2 内容过滤选择器
    • 5.3 属性过滤选择器
    • 5.4 表单过滤选择器

JQuery

1. hello world

• 导入: <script type="text/javascript" src="jquery.js\"></script>

$(function(){
    函数体;
    var $name = $("#ID"); //按id查询
})

2. 核心函数

$ 是一个函数

1. 传入函数时，相当于windows.函数,即页面加载完后
2. 传入HTML字符串时,帮助我们创建对象
3. 传入是选择器字符串时
   1. $(“#id 属性值”)根据id查询标签对象
   2. $(“标签名”) 根据标签名选择
   3. $(“.class属性值”) 根据类选择
4. 传入dom对象时,把这个dom对象转化为jQuery对象

3. 区分

3.1 Dom

通过getElement得到的对象

通过createElement创建的对象

3.2 jQuery

通过jQuery提供的API创建的对象

通过jQuery包装的Dom对象

通过jQuery提供的API查询的对象

3.3 jQuery对象本质

dom对象的数组 + jQuery一系列的功能函数

二者的属性和方法不共用

3.4 转换

先有dom对象,用$(dom对象)转换

先有jQuery对象,用jQuery下标取出dom对象

4. 层级选择器

所有元素,后者为前者子元素:$("parent child")

给定父元素取直接子元素:$("parent > child")

在元素后的所有元素:$("bro1 + bro2")

找到所有同辈的元素:$("step1 ~ step2")

5. 过滤选择器

5.1 基本过滤选择器

• first $("li:first") 查找第一个
• last $("li:last") 查找第二个
• even $("tr:even") 查找索引为偶数的元素
• not(selector)$("input:not(:checked)") 查找所有未
• odd $("tr:odd") 所有索引为奇数的元素
• eq(index)$("tr:eq(1)")给定索引值
• gt(index)$("tr:gt(1)")大于给定值
• lt(index)$("tr:lT(1)")小于给定值
• header $(":header") 匹配标题元素
• animated $(" ")匹配正在执行动画的元素
• focus $("")

5.2 内容过滤选择器

• contains $("div:contains") 包含内容的元素
• empty $("td:empty") 不包含子元素或文本的空元素
• parent $("td:parent") 包含子元素或文本的元素
• has(selector)$("div:has(p)")包含p元素的元素

5.3 属性过滤选择器

• attribute $("div[id]") 匹配给定属性的元素
• attribute=value $("div[name='me']")匹配给定属性是某个特定值的元素
• attribute!=value $("div[name!='me']")匹配所有不含有指定属性的元素
• attribute^=value $("div[id^='t']")匹配值是以某些值开始的元素
• attribute$=value‘$(“div[id$=‘n’]”)`匹配值是以某些值结尾的元素
• attribute*=value $("div[id*='_']")匹配值是包含某些值的元素
• [][][]$("div[id][name][class]") 同时满足多个条件的元素

5.4 表单过滤选择器

• input $("") 输入
• text $("") 单行文本框
• password $("") 密码
• radio $("") 单选
• checkbox $("") 复选
• submit $("") 提交
• image $("") 图片
• reset $("") 重置
• button $("") 按钮
• file $("") 上传文件
• hidden $("") 隐藏

disabled–>是否可输入

checked–>是否选中

selected–>option选中