【JQuery】part1

最新推荐文章于 2024-09-16 08:47:17 发布

五岁能抬头1995

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量134

点赞数

分类专栏： javaweb 文章标签： jquery javascript js java css

本文链接：https://blog.csdn.net/weixin_46932548/article/details/106962521

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

【JQuery】part1

JQuery是一个JavaScript框架，简化JS开发。

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

快速入门

步骤：

下载JQuery
目前JQuery有三个版本：
1.x：兼容ie678，使用最为广泛，官方只做BUG维护；
2.x：不兼容ie678，很少有人使用，官方只做BUG维护；
3.x：不兼容ie678，只支持最新浏览器。除非特殊要求一般不会用。

jquery-xxx.js与jquery-xxx.min.js的区别：
jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释；
jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些，程序加载更快。

导入JQuery的js文件
使用

JQuery对象和JS对象的区别与转换

1.JQuery对象在操作时更加方便。
2.JQuery对象与JS对象方法不通用。
3.两者相互转换
   * JQ --> js：jq对象[索引] 或者 jq对象.get(索引)
   * js --> JQ：$(js对象)

基本语法

事件绑定

    //给b1按钮添加单击事件
    //1.获取b1按钮
    var $b1 = $("#b1");
    //2.调用其click方法
    $b1.click(function(){
        alert("abc");
    })

入口函数

        //入口函数(dom文档加载完成之后执行该函数中的代码)
        $(function () {
            //给b1按钮添加单击事件
            //1.获取b1按钮
            var $b1 = $("#b1");
            //2.调用其click方法
            $b1.click(function () {
                alert("abc");
            })

        });

注意：$(function)与window.onload的区别

window.onload只能定义一次，如果定义多次，后边的会将前面的覆盖掉
$(function)可以定义并执行多次

样式控制

        $(function(){
            //css样式名称写法
            $("#div1").css("background-color","red");
            //DOM写法
            $("#div2").css("backgroundColor","blue");
        })

选择器【重点】

选择器：筛选具有相似特征的元素（标签）。

基本选择器

标签选择器（元素选择器）
- 语法：$(“html标签名”) 获取所有匹配标签名称的元素
id选择器
- 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
类选择器
- 语法：$(".class的属性值") 获取与指定的class属性值匹配的元素
并集选择器
- 语法：$("选择器1,选择器2…”) 获取多个选择器选中的所有元素

层级选择器

后代选择器
- 语法：$("A B ") 选择A元素内部的所有B元素（孙子也算）
子选择器
- 语法：$(“A > B”) 选择A元素内部的所有B子元素（只选儿子）

属性选择器

属性名称选择器
- 语法：$(“A[属性名]”) 包含指定属性的选择器
属性选择器
- 语法：$(“A[属性名 = ‘值’]”) 包含指定属性等于指定值的选择器
符合属性选择其
- 语法：$("A[属性名 = ‘值’][]") 包含多个属性条件的选择器

过滤选择器

首元素选择器
- 语法：:first 获得选择的元素中的第一个元素
尾元素选择器
- 语法：:last 获得选择的元素中最后一个元素
非元素选择器
- 语法：:not(selector) 不包含指定内容的选择器
偶数选择器
- 语法：:even 偶数，从0开始计数
奇数选择器
- 语法：:odd 奇数，从0开始计数
等于索引选择器
- 语法：:eq(index) 指定索引元素
大于索引选择器
- 语法：:gt(index) 大于指定索引元素
小于索引选择器
- 语法：:lt(index) 小于指定索引元素
标题选择器
- 语法：:header 获得标题元素，固定写法

表单过滤选择器

可用元素选择器
- 语法：:enabled 获得可用元素
不可用元素选择器
- 语法：:disabled 获得不可用元素
选中选择器
- 语法：:checked 获得单选/复选框选中的元素
选中选择器
- 语法：:selected 获得下拉框选中的元素

DOM操作

内容操作

方法	作用	示例
`html()`	获取/设置元素的标签体内容	`<a><font>内容</font></a>`–>`<font>内容</font>`
`text()`	获取/设置元素的标签体纯文本内容	`<a><font>内容</font></a>`–>`内容`
`val()`	获取/设置元素的value属性值	`<input type="text" value="zhangsan">`–>`zhangsan`

属性操作

通用属性操作

方法作用
attr() 获取/设置元素的属性,设置时传入键值对
removeAttr() 删除属性
prop() 获取/设置元素的属性,设置时传入键值对
removeProp() 删除属性
attr与prop的区别？
1. 如果操作的是元素的固有属性，则建议使用prop()
2. 如果操作的是元素的自定义属性，则建议使用attr()

方法	作用
`attr()`	获取/设置元素的属性,设置时传入键值对
`removeAttr()`	删除属性
`prop()`	获取/设置元素的属性,设置时传入键值对
`removeProp()`	删除属性

对class属性操作

方法	作用
`addClass()`	添加class属性值
`removeClass()`	删除class属性值
`toggleClass()`	切换class属性值，如果属性值存在即删除，不存在即添加
`css()`	对对象元素的css样式进行控制

CRUD操作

方法	作用
`append()`	调用方法的对象将参数对象追加到末尾【参数对象是子对象】
`prepend()`	调用方法的对象将参数对象追加到开头【参数对象是子对象】
`appendTo()`	调用方法的对象追加到参数对象的末尾【调用方法的对象是子对象】
`prependTo()`	调用方法的对象追加到参数对象的开头【调用方法的对象是子对象】
`after()`	将参数对象添加到调用方法的对象的后边【两个对象平级】
`before()`	将参数对象添加到调用方法的对象的前边【两个对象平级】
`insertAfter()`	将调用方法的对象添加到参数对象的后边【两个对象平级】
`insertBefore()`	将调用方法的对象添加到参数对象的前边【两个对象平级】
`remove()`	移除元素
`empty()`	清空元素的所有子元素【后代元素】