jquery超全详解

发布日期：2021-05-07 03:05:50 浏览次数：24 分类：原创文章

本文共 4025 字，大约阅读时间需要 13 分钟。

jQuery详解

文章目录

jQuery简介

1.介绍

jQuery其实也是JavaScript，只不过它封装了js，相当于一个函数库。
jQuery可实现网页交互效果，并且比js更加简便，代码编写更加简单。
jQuery免费开源。

2.用法

2.1 引入

js是一个库，所以要在自己的代码前提前引入。

这是我目前使用的版本，如果想要下载最新的，可在官网下载。

链接：https://pan.baidu.com/s/11phqZyEqGiM616yOuHZPBQ
提取码：bxhh
复制这段内容后打开百度网盘手机App，操作更方便哦

<script src="js/jquery.js"></script>

路径取决于自己的路径。

2.2 入口函数

js获取标签元素等待页面加载完成再获取，给onload属性设置函数可解决这个问题。

但是jquery提供ready函数，比js的更快。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="js/jquery.js"></script>    <script>        window.onload = function()        {                var oP = document.getElementById('pp');            alert("原生获取的p:"+oP);        };// 获取的是一个标签对象:[object HTMLParagraphElement]                // jquery获取 完整版        $(document).ready(function(){                var $p =  $('#pp');            alert("juery获取的p："+$p);        });        //jquery 获取 简化版        $(function(){                var $p = $('#pp');            alert('这是简化版获取的p：'+$p);        });    </script></head><body>        <p id="pp">这是一个p标签</p></body></html>

3.选择器

就是选择标签元素

3.1 种类

标签选择器
类选择器
id选择器
层级选择器
属性选择器

3.2 代码示例

$('#Id') //选择id为Id的标签$('.Class') // 选择class为Class的标签$('p') //选择所有的p标签$('#mi a span') //选择id为mi标签下的所有a标签下的span标签$('input[name=second]') // 选择name属性等于second的input标签

判断获取成功与否：

使用length属性进行判断：当长度大于0时获取成功，反之失败

        $(function(){               var $div = $('.myclass').length;            alert($div);        });

4.选择器用法

4.1 选择器过滤

顾名思义，就是根据选择的标签过滤掉自己不想要的标签。

has（选择器名称）方法：选择指定的选择器
eq（索引）方法：选择指定索引的标签

        $(function(){               var $p = $('id').has('#pp');//包含class属性为pp的标签            var $p1 = $('id').eq(2);//第二个id标签        });

4.2 选择器转移

$(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
$(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
$(’#box’).next(); 表示选择id是box元素的下一个的同级元素
$(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
$(’#box’).parent(); 表示选择id是box元素的父元素
$(’#box’).children(); 表示选择id是box元素的所有子元素
$(’#box’).siblings(); 表示选择id是box元素的其它同级元素
$(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素

5.获取和设置元素

5.1 元素内容

html和append方法

        $(function(){               var $p = $('p');            //获取标签内容            var result = $p.html();            alert(result);            //修改标签内容，之前的内容会被覆盖            $p.html("<span style='color:blue'>哈哈</span>");                        //给指定标签追加内容            $p.append("male")        });

5.2 元素属性

prop和val方法

使用css方法可以设置样式属性，而设置其他属性可以用prop方法。

        $(function(){               var $div = $('div');            //获取div的class属性            var divClass = $div.prop('class');            alert(divClass);                        var $p = $('p');//修改属性            $p.prop({   "href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});                        var $divval = $('div');            //获取value属性可用val方法简写            var divval = $divval.val();             //设置value属性的值            $divval.val('222');        })

6. jquery事件

6.1 常用事件

click() 鼠标单击事件
blur() 元素失去焦点事件
focus() 元素获得焦点事件
mouseover() 鼠标进入（进入子元素也触发）事件
mouseout() 鼠标离开（离开子元素也触发）事件
ready() DOM加载完成事件

6.2 代码示例

		 //  鼠标点击        $li.click(function(){                            // this指的是当前发生事件的对象，但是它是一个原生js对象            // $(this) 指的是当前发生事件的jquery对象            $(this).css({   'background':'gold'});                        // 获取jquery对象的索引值,通过index() 方法            alert($(this).index());        });              //  获取焦点        $text.focus(function(){               $(this).css({   'background':'red'});        }); 		 //  一般和按钮配合使用        $button.click(function(){               alert($text.val());        });        //  失去焦点        $text.blur(function(){               $(this).css({   'background':'white'});        });        //  鼠标进入        $div.mouseover(function(){               $(this).css({   'background':'gold'});        });        //  鼠标离开        $div.mouseout(function() {               $(this).css({   'background':'white'});        });

如要获取更多资料，可关注公共号回复关键字领取。
在这里插入图片描述

上一篇：c/c++ math库常用的函数

下一篇：牛客ioi周赛23-普及组 1-3题解总结

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！