jQuery基础

2024-04-16 06:55•数据库•阅读 3550

一、jQuery简介

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

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

模块《=》类库

DOM/BOM/JavaScript的类库，所以jQuery也分为两部分：

查找元素
操作元素

jQuery 中文文档

jQuery官网地址

二、jQuery和Dome关系以及jQueryv版本

1.jQuery版本

当前jQuery版本：这里使用的1.x系列最新版本

1.x系列兼容性最好，1系列当前最新1.12
2.x系列
3.x系列最新的版本，IE低版本不再支持

下载的时候有两个版本：一个标准版、一个min压缩版。测试时使用标准版，线上建议使用压缩版。

载后，引入jQuery类库：

<head>
    <link rel="stylesheet" href="1.css">
    <!--引入css文件-->
    <style>
        /* 写css样式 */
    </style>

    <script src="jquery-1.12.4.js"></script>
    <!--引入jQuery类库，JavaScript一般放到body尾部-->
    <script>
        // script 代码。调用使用 jQuery.xxx
        // jQuery.xxx  <==>  $.xxx  $等同于jQuery关键字
    </script>
</head>

2.jQuery和Dom转换

> $('#i1')     // jQuery获取
[<input type="text" >]
> document.getElementById('i1')  // dom获取
<input type="text" >
> $('#i1')[0]  // jQuery对象转换为dom对象
<input type="text" >
> $(document.getElementById('i1')) // dom对象转换为jQuery对象
[<input type="text" >]
// 转换：
    // jquery对象[0]   => Dom对象
    // Dom对象         => $(Dom对象)

三、jQuery选择器

1.基本和层级

id选择器

$('#id')

class选择器

<div class='c1'></div>
$(".c1")

标签选择器

<a>f</a>
$('a')

组合

$(' a, .c1, #i10 ')

$(‘#i10 a’) 子子孙孙（i10里所有a标签）
$(‘#i10>a’) 儿子（只取子标签里的a标签）
prev + next 下一个标签
prev ~ siblings 兄弟标签

2.基本筛选器

:first          // 获取匹配的第一个元素
:last
:not(selector)  //去除所有与给定选择器匹配的元素
// 在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
:even           // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd            // 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)      :gt(index)      :lt(index) 
// 等于           大于          小于
:header         // 匹配如 h1, h2, h3之类的标题元素

3.属性选择器

之前的内容，没有对自定义属性进行查找的，如：<a fgf='22'></a>

jQuery 支持对自定义属性的获取查找

$('[fgf]')       // 具有fgf属性的所有标签
$('[fgf="22"]')  // fgf属性等于22的标签
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

4.表单对象及其属性

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("input[type='text']")    // 不使用表单选择器，也能实现
$(':text')             // 使用表单选择器

:enabled        // 可编辑，默认就是
:disabled       // 不可编辑
:checked        // 被选中（单选框、复选框)
:selected       // 被选中（下拉框)

四、jQuery示例及其知识点

jQuery示例

筛选器：

$('#i1').next()                  // 下一个            
$('#i1').prev()                  //往上找
$('#i1').nextAll()            　 // 下面所有           
$('#i1').prevAll()
$('#i1').nextUntil('#ii1')      // 下面直到哪里     
$('#i1').prevUntil('#ii1')
$('#i1').parent()                     // 父标签
$('#i1').parents()                   // 取得一个包含着所有匹配元素的祖先元素的元素集合
$('#i1').parentsUntil()           //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li').eq(1)   <——>  $('li:eq(1)')
first()
last()
hasClass(class)

添加移除样式：

$('#i1').addClass(..)  // 添加样式
$('#i1').removeClass(..)// 移除样式

文本操作：

$(..).text()            // 获取文本内容
$(..).text("<a>1</a>")  // 设置文本内容

$(..).html()           // 获取
$(..).html("<a>1</a>")  // 设置

$(..).val()                // 获取
$(..).val(..)          // 设置

样式操作：

addClass 
removeClass 
toggleClass 比如实现网页开关灯功能

属性操作：

// 专门用于做自定义属性
$(..).attr('n')          // 获取
$(..).attr('n','v')      // 设置
$(..).removeAttr('n')    // 删除

<input type='checkbox'   />
// 专门用于chekbox,radio  jQuery1、2版本checkbox使用attr的话有bug，所以用prop
$(..).prop('checked')
$(..).prop('checked', true)

文档处理：

append    // 往后加
prepend   // 往前加
after     // 紧挨着后面
before    // 紧挨着前面

remove    // 删除
empty     // 只清空内容

clone     // 克隆一份数据

五、jQuery 扩展

如果想自定义jQuery功能，可以如下定义：

$.extend $.方法
$.fn.extend $(..).方法

<body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        var v = $.wangsen();
        alert(v);
//        $('#i1').css()
//        $.ajax()
        // 第二种写法：.fn.extend
        $.fn.extend({
            "name1": function () {
                return 'fgf00';
            }
        });
        var v2 = $('#i1').hanyang();
        alert(v);
        // 第一种写法：.extend
        $.extend({
            'name2': function () {
                return 'fgf01';
            }
        });
        var v1 = $.wangsen();
        alert(v);
    </script>
</body>

如果引入第三方jQuery扩展，全局变量、扩展名，可能重复，因此使用还是都定义自执行函数。

(function (arg) {
    var status = 1;
    arg.extend({
       'name': function () {
           return 'fgf';
       }
    });
})(jQu$ery);

jQuery基础

一、jQuery简介

二、jQuery和Dome关系以及jQueryv版本

1.jQuery版本

2.jQuery和Dom转换

三、jQuery选择器

1.基本和层级

2.基本筛选器

3.属性选择器

4.表单对象及其属性

四、jQuery示例及其知识点

五、jQuery 扩展

相关推荐

jQuery学习总结，一——jQuery基础与学习资源

，转jQuery 基础

3、jQuery的DOM基础

jquery 基础

jQuery基础语法

jQuery基础细节

jQuery 基础

jQuery基础学习4——jQuery容错性