jQuery学习笔记分享

最新推荐文章于 2022-07-09 11:01:37 发布
最新推荐文章于 2022-07-09 11:01:37 发布
阅读量107 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43404042/article/details/107370283
版权

jQuery学习笔记(一)

概念
jQuery:
是一个轻量级的JavaScript函数库，用来简化JS开发。
优点：写的少做的多 简化了dom操作，优化了事件机制
具有强大的元素选择器，使用的是css1-css3所有的选择器

1.jQuery的引入
所有jQuery的操作都依赖于jQuery库的支持。在写代码之前需要先进行引入! 以下都是引入如图的jQuery库。
需在开始写代码之前引入jQuery库在源码中，jQuery是一个函数，该函数内部返回。
在jQuery库中，$ 是jQuery的简写形式，需要使用标识符$来完成代码。
如下：

$(window).ready(function (){
    console.log("dom加载完成");
})；

简写如下：

function (){
    console.log("简写");
});

2.jQuery选择器
jquery : dom元素获取返回的集合类型
选择器 -----dom元素获取

声明部分：

<button class="btn" id="anniu">按钮</button>
<button class="btn" id="anniu1">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<ul class="menu">
    <li>1</li>
    <li>2
        <ul class="child">
            <li>21</li>
            <li>22</li>
            <li>你好</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<h1>111</h1>
<h2>111</h2>
<h3>111</h3>
<h4>111</h4>
<div></div>
<div>

</div>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
</ul>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input type="reset"/>
<input type="button"/>
<input type="radio" checked/>
<input type="radio"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">宝鸡</option>
    <option value="" selected>西安</option>
</select>

<span id="#span">特殊字符</span>
<span class="+span">特殊字符</span>

代码部分：

   
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#anniu"));
    console.log($("#anniu,#anniu1"));
    console.log($("ul li"));
    console.log($("ul.menu>li"));
    console.log($("ul.menu>li:nth-child(1)+li"));
    console.log($("ul.menu>li:nth-child(1)~li"));
    console.log($("ul.menu>li:first"));
    console.log($("ul.menu>li:first-child"));
    console.log($("ul.menu>li:not(.child)"));//not(selector)
    console.log($("ul.menu>li:even"));//索引值为偶数
    console.log($("ul.menu>li:odd"));//索引值为奇数
    console.log($(".menu>li:eq(2)"));//索引值
    console.log($(".menu>li:lt(2)"));//小于
    console.log($(".menu>li:gt(2)"));//大于
    console.log($("body:header"));
    $("input").focus(); //默认获得焦点
    console.log($("body :focus"));
    console.log($(":root"));//根
    console.log($("ul li:contains(2)"));  //内容包含
    console.log($("ul li:contains(你)"));
    console.log($("div:empty"));//空
    console.log($("ul.menu:has(.child)"))//含有该选择器
    console.log($("div:parent"));//匹配的元素必须有子元素或者内容  也就是匹配该元素为父元素
    console.log($(":visible"));//可见
    console.log($(":hidden"));//隐藏
    console.log($("input[type]"));
    console.log($("input[type='text']"));
    console.log($("input[type^='t']"));//以什么开始
    console.log($("input[type$='t']"));//以什么结尾
    console.log($("input[type*='t']"));//包含什么
    console.log($("input[type][class][id]"));//复合写法
    console.log($("#nav>li:first-child"));
    console.log($("#nav>li:last-child"));
    console.log($("#nav>li:first-of-type"));
    console.log($("#nav>li:last-of-type"));
    console.log($("#nav>li:nth-child(3)"));
    console.log($("#nav>li:nth-last-child(2)"));
    console.log($("#nav>li:nth-of-type(2)"));
    console.log($("#nav>li:nth-last-of-type(2)"));
    console.log($(":input"));
    console.log($(":text"));
    console.log($(":password"));
    console.log($(":radio"));
    console.log($(":checkbox"));
    console.log($(":submit"));
    console.log($(":reset"));
    console.log($(":file"));
    console.log($(":image"));
    console.log($("input:disabled"));//不可用
    console.log($("input:enabled"));//可用
    console.log($("input[type=radio]:checked"));//默认选择
    console.log($("select>option:selected"));
    //$.escapeSelector("#span")   3.0+以上版本
    console.log($.escapeSelector("#span"));
    console.log($("#"+$.escapeSelector("#span")));//   \#span
    console.log($("."+$.escapeSelector("+span")));//   \#span

3.属性操作
在jQuery中可以进行堆操作
属性操作：获取或者设置属性的值
声明部分：

<input type="text" id="ipt" value="123" class="info"/>
<input type="text" id="ipt1" value="789" class="info"/>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<div class="box  block"></div>
<input type="text" id="list"/>
<div class="content"></div>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球
<style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
        }
    </style>

代码部分：

console.log($("#ipt").attr("value"));//获取
    $("#ipt").attr("value","456");//修改
    //回调函数写法 参数为当前索引和内容
    $("#ipt").attr("value",function(index,val){
        console.log(index,val);
        return val*val;
    })
//作用同上
    console.log($(".info").attr("value"));
     $("#ipt").removeAttr("value");//移除
     console.log($("#ipt1").prop("value"));
     $("#ipt1").prop("value","abc");
     $("#ipt1").prop("value",function(index,val){
     console.log(index,val);
     return val+"m";
     })
     $("#ipt1").removeProp("value");
     $("#ipt1").removeAttr("value");
    //自定义属性
    $("#ipt1").attr("data-index",0);
    console.log($("#ipt1").attr("data-index"));
    $("#ipt1").removeAttr("data-index");

    $("#ipt1").prop("data-page",1);
    console.log($("#ipt1").prop("data-page"));//prop自定义属性添加无显示

    $("#fbtn").click(function(){
        $(".ckbox").each(function(index){
            console.log(!undefined);
            $(this).prop("checked",!$(this).prop("checked"));
        })
    })
    /*
    * class 属性操作
    * */
    $(".block").addClass("box1 user");
    $(".block").removeClass("user");
    //toggleclass 类别切换
    $(".block").toggleClass("box");
    $(".block").addClass(function (index,elec){
        return "data";
    })
    $(".block").removeClass(function (index,elec){
        console.log(index,elec);
        return "data";
    });
    $(".block").toggleClass(function (index,elec){
        console.log(index,elec);
        return "user";
    },false);
    //文本或者值操作
    //html() 获取或者设置元素的内容值
    //text() 获取或者设置元素的文本值
    //val() 获取或者设置元素value
    $(".content").html("<span>123</span>");
    $(".content").text("<sapn>123</sapn>");
    console.log($(".content").html());
    console.log($(".content").text());
//参数为当前索引和内容
    $(".content").html(function(index,val){
        console.log(index,val);
        return "不知道"
    });
    $(".content").text(function(index,val){
        console.log(index,val);
        return "text"
    });
    //值操作
    //var 获取或者设置value
    $("#list").var("....");
    console.log($("#list").val());
    $("#list").val(function (index,val){
            console.log(index,val);
        return "换值";
    });*/

    /*$(".hobby").val(["a","","c"]);*/

    $(".hobby").eq(0).val(["a"]);

4.css操作
css() 用来获取或者设置元素的css
在jQuery里面可以进行链式操作 （连点操作）
声明部分：

<div id="box"></div>
<div class="list">
    <div class="block"></div>
</div>
  <style>
        body{
            position: relative;
        }
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .block{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>

代码部分：

<script>
   /* $("#box").css("width","200px").css("height","200px").css
   ("border","1px solid #000");*/  //链式操作
    $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000",
        backgroundColor:"red"
    });
    console.log($("#box").css("border"));
    //offset  相对适口的偏移
    console.log($("#box").offset());
    //position  相对父元素的偏移
    //父元素要进行相对定位
    console.log($("#box").position());
    //scrollTop 获取或设置元素的上滑距
    console.log($(".list").scrollTop());
    $(".list").scrollTop(100);
    console.log($(".list").scrollLeft());
    $(".list").scrollLeft(100);
    /*
    * width()   设置或获取
    * */
    //$(".list").width(300);
    console.log($(".list").width());
    //$(".list").height(300);
    console.log($(".list").height());
    console.log($(".list").innerHeight());
    console.log($(".list").innerWidth());
    console.log($(".list").outerWidth(true));
    console.log($(".list").outerHeight());
</script>

5.筛选
声明：

<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
 <style>
        body {
            position: fixed;
        }
    </style>

代码：

<script>
    //过滤
    console.log($("ul>li").eq(0));
    console.log($("ul>li").eq(-1));//注意  倒着找  从-1

    console.log($("ul>li").first());
    console.log($("ul>li").last());
    //直接写名称
    console.log($("ul>li").hasClass("li4"));
    console.log($("ul>li").is(".li4"));

    $("ul>li").each(function (index) {
        if ($(this).hasClass("li4")) {
            console.log($(this));
        }
    });
    console.log($("ul>li").filter(".li4"));
    console.log($("ul>li").filter(function (index) {
        if ($(this).is(".li4")) {
            return $(this);
        }
    }));
    console.log($("ul>li").is(function (index) {
        if ($(this).hasClass("li4")) {
            return true;
        }
    }));
    console.log($("ul>li"));
    console.log($("ul>li").map(function (index, obj) {
        //obj  是原生的js对象
        ;
        return $(obj).text();
    }));
    console.log($("ul>li").has(".sp"));
    console.log($("ul>li").not(".li4"));
    console.log($("ul>li").not($("ul>li").has(".sp")));
    console.log($("ul>li").not(function (index, obj) {
        if ($(obj).is(".li4")) {
            return obj;
        }
    }));
    console.log($("ul>li").slice(0, 2));

    //查找
    //children()  不带参 获取元素的所有子集
    console.log($("ul>li").children());
    console.log($("ul>li").children(".sps"));
    console.log($("li:first").parent());
    console.log($("li:first").parents("body"));
    console.log($("ul").find(".li4"));
    console.log($(".li4").next());
    console.log($(".li4").nextAll(".li6"));
    console.log($(".li4").prev());
    console.log($(".li4").prevAll());
    console.log($("ul>li:nth-child(3)").nextUntil(".li4", "p"));
    console.log($("ul>li:nth-child(3)").nextAll());
    console.log($(".li4").offsetParent());
    console.log($(".li4").siblings());
    console.log($(".li4").siblings(".li6"));
    console.log($(".li6").add($(".li3")));
    console.log($(".li6").add("<span>123</span>"));
    console.log($(".li6").nextAll().addBack("li"));
    console.log($(".li6").contents('.sp1'));
    console.log($(".li6").find(".sp1").end());
</script>
moon_ruan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中事件的学习分享
Teacher_Tian_2019的博客
04-23 155
  最近闲来无事，把jQuery知识想温习一下。看到关于事件相关的API时，不仅一时来了兴致，进行了一番细细练习。   本文就以click事件为例，从如何解读API到使用进行分解说明。 1、jQuery中click事件API截图   注：上图来自网站http://jquery.cuishifeng.cn/ 2、分析 2.1、常见调用方式   先来研究一个这个方法的调用者是谁吧   上边截图中提到...
Jquery学习笔记分享
最新发布
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery学习心得总结(必看篇)
10-22
下面小编就为大家带来一篇jQuery学习心得总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery学习资料分享
angle860123的专栏
07-03 1715
阅读博客 添加收藏  jQuery学习资料分享 小微 发布于 1年前，共有 4 条评论 学习jQuery有一段时间了，收集了不少资料，这里把资料的链接分享给大家。另外推荐大家微博关注“开源中国”、“HTML5研究小组”、“百度技术沙龙”等，还有博客园的“梦想天空（山边小溪）”博客，我的很多资料都是从上面收集到的。 jQuery学习教程： （1）20个jQuery分页插件和教程，
jQuery学习心得
andou2860的博客
03-11 103
表示在document.ready时执行代码 $(function(){ //1、取得要操作的对象（尽量只限制范围），如果对象多次使用要记得缓存 var $selector = $('selector'); var $target = $selector.find(); 或者 var $target = $selector.children(); ...
jQuery学习总结（一）
小红帽
05-09 376
因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。     在说jQuery之前，不得不提下现在也非常流行的mootools框
分享jQuery插件的学习笔记
01-21
插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。而对于jQuery开发者而言，直接使用...
jQuery学习笔记之入门
01-21
最近在学习jQuery，在网上看到有几篇关于jQuery的文章，写的不错转载过来跟大家分享一下； 一、JQuery是什么 JQuery是什么？始终是萦绕在我心中的一个问题： 借鉴网上同学们的总结，可以从以下几个方面观察。 不使用...
汇编语言学习笔记分享
04-06
欢迎您阅读该笔记。 本人也是一名自学者，从2016年至今，本人学习了PS、AI、PR、AE、C4D、 达芬奇调色、realflow、vue景观、Marvelous Designer、 ...希望该笔记能够给大家提供帮助，祝大家学习愉快！
jQuery知识分享——上
DS153的博客
01-07 364
前言 完成之前的案例之后，我开始了jQuery的js库学习。jQuery的代码更加便捷方便，节省了很多开发人员书写大量代码的问题。jQuery就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。接下来就让我们一起学习学习jQuery的内容。 一、jQuery的概念 jQuery总体概况如下 : jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做
jquery分享插件，分享微信、qq空间、微博、人人网
03-29
使用jquery开发的一个分享插件，分享为弹出窗的形式。
jquery 网页分享功能实现
03-14
轻松实现把网页分享到QQ空间,人人网,百度,开心网等知名网站
Jquery实用技巧分享
ysds20211402的博客
02-14 223
转自：微点阅读https://www.weidianyuedu.com 1.通过方法返回Jquery对象实例 用 var someDiv = $(‘#someDiv").hide(); 代替 var someDiv = $(‘#someDiv"); someDiv.hide(); 2.使用find来查找 用 $(‘#someDiv").find(‘p.someClass").hide(); 代替 $(‘#someDiv p.someClass").hide();因为可以不必触发Jqu...
js日常分享==JQuery
weixin_45116848的博客
07-01 144
今天分享一些JQuery的一些小的知识点. 1.jQuery的核心技术$ 符,代表的是jQuery对象的引用. 在java script中通过ID选择器获取DOM对象. <div id="mydiv">Hello</div> //js中通过ID选择器 var mydivDom = document.getElementById("mydiv") //通过jquery的...
js原生VS jQuery实现分享到功能
weixin_45070265的博客
08-13 240
HTML结构和css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
12个有用的Jquery技巧分享
ysds20211402的博客
03-20 201
转自：微点阅读 https://www.weidianyuedu.com 1.通过方法返回Jquery对象实例 用 var someDiv = $(‘#someDiv").hide(); 代替 var someDiv = $(‘#someDiv"); someDiv.hide(); 2.使用find来查找 用 $(‘#someDiv").find(‘p.someClass").hide(); 代替 $(‘#someDiv p.someClass").hide();因为可以不必触发Jq...
jquery常见操作分享
栗子好好吃的博客
05-23 314
参考: https://www.cnblogs.com/eager/p/7133270.html
常用的14个Jquery技巧分享
xiaoweids的博客
07-09 119
转自：微点阅读 https://www.weidianyuedu.com1.通过方法返回Jquery对象实例用 var someDiv = $(‘#someDiv").hide(); 代替 var someDiv = $(‘#someDiv"); someDiv.hide();2.使用find来查找用 $(‘#someDiv").find(‘p.someClass").hide(); 代替 $(‘#someDiv p.someClass").hide();因为可以不必触发Jquery的Sizzle
jQuery中的事件个人分享
weixin_33970449的博客
09-09 142
jQuery事件 页面加载 DOM的页面加载机制 如果先编写JavaScript代码(用于获取页面元素),再加载页面元素 导致问题 - 无法成功获取页面元素 原因 - 执行这段JavaScript代码时,页面元素还没有被加载(不存在) 解决先执行代码后加载元素的问题 - window.onloa 保证先加载页面元素完毕后,在执行Java...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值