jQuery

最新推荐文章于 2023-07-06 09:32:00 发布

平安喜乐Alice

最新推荐文章于 2023-07-06 09:32:00 发布

阅读量289

点赞数

分类专栏： js 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44095347/article/details/108309619

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery入门

概念

jquery是一个快速，小巧而且功能丰富的JavaScript库。

通过id获取HTML元素

JavaScript：var obj=document.getElementById("id");

jQuery：var obj=$("id");

将一个HTML元素隐藏

JavaScript：document.getElementById("id").style.display="none";

jQuery：var obj=$("id").hide();

把一个HTML元素宽度变成200px

JavaScript：document.getElementById("id").style.display="none";

jQuery：var obj=$("id").css("width":"200px");

jQuery的作用

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
Ajax
Utilities

jQuery的引入

在页面的<head>中引入jQuery文件即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery官网：https://jquery.com/

$符号

$是jQuery的别名，绝大多数，我们都直接用$，若$变量已被占用，且不能改，就只能使用jQuery这个变量。

jQuery=function jQuery(agr){
    alert(agr);
}
$=window.jQuery=jQuery;

$(agr);
jQuery(agr);

$('div').addClass('div');
jQuery('div').addClass('div');

jQuery的书写格式

原生格式
window.onload=function(){
    ...
};

原始格式
$(document).ready(function(){
    $('div').addClass('div');
});

缩写格式
$().ready(function(){
    $('div').addClass('div');
});

$(function(){
    $('div').addClass('div');
});

项目：全屏的云南旅游相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <span></span>
    <nav>
        <a href="#">泸沽湖</a>
        <a href="#">丽江古城</a>
        <a href="#">茶马古道</a>
        <a href="#">就这家·云逸客栈</a>
        <a href="#">西双版纳</a>
        <a href="#">云南红酒庄</a>
        <a href="#">轿子雪山</a>
        <a href="#">普者黑</a>
        <a href="#">海埂大坝</a>
        <a href="#">玉龙湾</a>
        <a href="#">昆明郊野公园</a>
        <a href="#">欧洲风琴小镇</a>
    </nav>
    <div>
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
        <img src="images/7.jpg" alt="">
        <img src="images/8.jpg" alt="">
        <img src="images/9.jpg" alt="">
        <img src="images/10.jpg" alt="">
        <img src="images/11.jpg" alt="">
        <img src="images/12.jpg" alt="">
    </div>
</body>
</html>
$(document).ready(function(){
    $('a').click(function(){
        $('img')
        .eq($(this).index())
        .css({'opacity':'1'})
        .siblings()
        .css({'opacity':'0'});
    });
    // var alinks=$('a');
    // for(var i=alinks.length-1;i>=0;i--){
    //  // alinks[i].style.background='red';
    //  // alinks[i].style.border='5px solid yellow';
    //  // alinks[i].style.color='#fff';
    //  alinks.eq(i).css({                  //css()可以添加css样式也可以改变css样式
    //      'background':'red',
    //      'border':'5px solid yellow',
    //      'color':'#fff'
    //  }).html('<strong>七彩云南'+i+'</strong>')    //可以插入值，也可以解析HTML标签
    //  //.text('云南旅游'+i);                          //可以插入文本但是不可以解析标签
    // }
});

jQuery选择器

选择器是jQuery的核心

一个选择器写出来类似$("#dom-id")

JavaScript：var obj=document.getElementById("dom-id");

jQuery：var obj=$("#dom-id");

返回的对象是jQuery对象。类似数组，每个元素都是一个引用了DOM节点的对象。

不会返回undefined或者null

基本选择器

#id

根据给定的id匹配一个元素。优先级最高，效率最高。

<head>
    <meta charset="UTF-8">
    <title>ID</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" >
        $(document).ready(function(){
            var first=$('#first');
            console.log(first);
            var second=$("#second");
            console.log(second);
            var third=$("#third");
            console.log(third);
        });
    </script>
</head>
<body>
    <div id="first" class="div first">First div element.</div>
    <div id="second" class="div second">Second div element.</div>
    <div id="third" class="div third">Third div element.</div>
</body>

element

根据给定的元素标签名匹配所有元素。效率相对较差，建议使用。

$(document).ready(function(){
    var div=$('div');
    console.log(div);
});

.class

根据给定的css类名匹配元素。效率相对较差，建议使用。

$(document).ready(function(){
    var div=$('.div');
    console.log(div);
    var first=$('.first');
    console.log(first);
    var second=$('.second');
    console.log(second);
    var third=$('.third');
    console.log(third);
});

*

匹配所有元素。效率最差，不建议使用。

$(document).ready(function(){
    var all=$('*');
    console.log(all);
});

多项选择器

$("selector1,selector2,selectorN);

将每一个选择器匹配到的元素合并后一起返回。

可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

层级选择器

$('ancestor descendant');

在给定的祖先元素下匹配所有的后代元素。

$('parent>child');

在给定的父元素下匹配所有的子元素。

$('prev+next');

匹配所有紧接在prev元素后的next元素。

$('prev siblings');

匹配prev元素之后的所有siblings元素。

属性选择器

【attribute】

【attribute = value】

【attribute != value】

【attribute ^= value】

【attribute $= value】

【attribute *=value】

【selector1】【selector2】【selectorN】

过滤器

：first-child

：last-child

：nth-child（n | even | odd | formula）

：nth-last-child（n | even | odd | formula）

：only-child

n

匹配子元素序号。必须是整数，从1开始

even

匹配所有偶数元素

odd

匹配所有奇数元素

formula

使用特殊公式如（an+b）进行选择

表单相关

：input

可以选择<input>，<textarea>，<select>和<button>

：text

匹配所有的单行文本框，和input[type='text']一样

其他input的type

：password/：radio/：checkbox/：image/：reset/：button/：file

：enabled、：disabled

enabled匹配所有可用元素，：disabled匹配所有不可用元素

：checked

匹配所有选中的被选中元素（复选框，单选框等，select中的option）

：selected

匹配所有选中的option元素

查找和过滤

find（expr | object | element）

搜索所有与指定表达式匹配的元素

children（[expr]）

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

parent（[expr]）

取得一个包含着所有匹配元素的唯一父元素的元素集合

next（[expr]、prev[expr]）

取得一个包含匹配的元素集合中每一个元素紧邻的后面（前面）同辈元素的元素集合

eq（index | -index）

获取当前链式操作中第N个jQuery对象

siblings（[expr]）

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

filter（expr | object | element | fn）

筛选出与指定表达式匹配的元素集合

参数

expr

字符串值，包含供匹配当前元素集合的选择器表达式

object

现有的jQuery对象，以匹配当前的元素

element

一个用于匹配元素的DOM元素

一个函数用来作为测试元素的集合

jQuery事件

鼠标事件

click([[data],fn])

鼠标单击时触发

//单击事件
    // $('a').click(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

dblclick([[data],fn])

鼠标双击时触发

//双击事件
    // $('a').dblclick(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

mousedown

鼠标按下时触发

//鼠标按下时触发
    // $('a').mousedown(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

mouseup

按下的鼠标放松时触发

//按下的鼠标放松时触发
    // $('a').mouseup(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

mouseenter

鼠标进入时触发

//鼠标移到时触发
    // $('a').mouseenter(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

mouseleave

鼠标移出时触发

//鼠标移出时触发
    // $('a').mouseleave(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // });

hover([over,]out)

鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

//鼠标进入和退出时触发两个函数相当于mouseenter和mouseleave
    // $('a').hover(function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'1'})
    //  .siblings()
    //  .css({'opacity':'0'});
    // },function(){
    //  $('img')
    //  .eq($(this).index())
    //  .css({'opacity':'0'})
    //  .siblings()
    //  .css({'opacity':'1'});
    // });

mouseover,mouseout

鼠标进入（移出）指定元素及其子元素时触发

//鼠标进入移出指定元素及其子元素时触发
    // $('nav').mouseover(function(){
    //  console.log($(this));
    // });
    // $('nav').mouseout(function(){
    //  console.log($(this));
    // });

mousemove([[data],fn])

在DOM内部移动时，会发生mousemove事件

//在DOM内部移动时触发
    // $('nav').mousemove(function(){
    //  console.log($(this));
    // });

scroll([[data],fn])

当滚动指定的元素时，会发生scroll事件

//滚动事件
    // $('nav').scroll(function(){
    //  console.log($(this));
    // });

键盘事件

keydown([[data],fn])

当键盘或按钮被按下时发生

// $('a').keydown(function(event){
    //  console.log(event);
    // });

keyup([[data],fn])

当按钮被松开时发生，发生在当前获得焦点的元素上

// $(document).keyup(function(event){
    //  console.log(event);
    // });
    // $('input').keyup(function(event){
    //  console.log(event);
    // });

keypress([[data],fn])

当键盘或按钮被按下时发生

//$(document).keypress(function(event){
        //console.log(event);
    // });
    // $('input').keypress(function(event){
    //  console.log(event);
    // });

其他事件

ready(fn)

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

resize([[data],fn])

当调整浏览器窗口的大小时发生

//调整浏览器窗口大小时触发，document无法实现
    // $(window).resize(function(){
    //  console.log($(this));
    // })

focus([[data],fn])、blur([[data],fn])

当元素获得（失去）焦点时触发

// $('.formElement').focus(function(){
    //  console.log('我获得焦点啦！');
    // });
    // $('.formElement').blur(function(){
    //  console.log('我失去焦点啦！');
    // });

change([[data],fn])

当元素的值发生改变时发生

// //文本中的内容发生改变时触发
    // $('.formElement').change(function(){
    //  console.log('我正在发生改变！');
    // });

select([[data],fn])

当textarea或文本类型的input元素中的文本被选择时发生

// //文本，文本域被选中时触发,只针对输入框有效
    // $('.formElement').select(function(){
    //  console.log('我被选中了！');
    // });

submit([[data],fn])

当提交表单时发生

// submit事件三种用途
    //提交表单
    // $('input[type=button]').click(function(){
    //  $('form').submit();
    // });
    //阻止表单提交
    //可以填写很多内容，只要最后返回是false，表单就不会提交
    // $('form').submit(function(){
    //  //...
    //  return false;
    // });
    //提交表单时做一些我们所需要做的事情(多用于表单验证)
    // $('form').submit(function(){
    //  var inputValue=$('input[type=text]').val();
    //  if(inputValue!=='www.imooc.com'){
    //      return false;
    //  }
    // });

事件参数

event

所有参数传入event对象作为参数，可以从event对象上获取到更多的信息

事件绑定与取消

on(events,[selector],[data],fn)

在选择元素上绑定一个或多个事件的事件处理函数

off(events,[selector],[data],fn)

在选中元素上移出一个或多个事件的事件处理函数

JSON基础

介绍

JSON（JavaScript object notation），全称JavaScript对象表示法，是一种数据交换的文本格式，用于读取结构化数据。

语法

{
    "sites":[
        {
            "name":"渡课网","url":"www.dodoke.com"
        },
        {
            "name":"百度网","url":"www.baidu.com"
        }
    ]
}

语法规则

简单值

简单值使用与JavaScript相同的语法，可以在JSON中表示字符串，数值，布尔值和null。必须使用双引号表示，不能使用单引号，数值必须以十进制表示，不能使用NaN和Infinity。不支持undefined

对象

对象作为一种复杂数据类型，表示的是一组有序的键值对，每个键值对中的值可以是简单值，也可以是复杂数据类型的值。JSON中对象的键名必须放在双引号里面，末尾没有分号。同一个对象中不应该出现两个同名属性

数组

数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组或对象最后一个成员的后面，不能加逗号

JSON与字符串相互转换

字符串转换成json

        var str="{\"name\":\"xiaoming\"}";//定义字符串
        console.log(str);//输出
        var json=JSON.parse(str);//字符串转换成JSON
        console.log(json);
        document.write("</hr>");
        document.write("姓名:"+json.name);//输出JSON中的name

输出：

json转换成字符串

        var json={"name":"xiaoming"}//定义json
        console.log(json);//输出
        var str=JSON.stringify(json);//json转换成字符串
        console.log(str);
        console.log(typeof str);

输出：

初始化json

 //初始化json
        var json1={};
        json1.name="小明";
        json1.age="20";
        json1.sex="男";
        console.log(json1);

平安喜乐Alice

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
jQuery

jQuery入门概念jquery是一个快速，小巧而且功能丰富的JavaScript库。通过id获取HTML元素JavaScript：var obj=document.getElementById("id");jQuery：var obj=$("id");将一个HTML元素隐藏JavaScript：document.getElementById("id").style.display="none";jQuery：var obj=$("id").hide();把一个HTML元
复制链接

扫一扫

专栏目录