草庐IT

2022-8-26 jq简单了解

ychptz 2023-03-28 原文

Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
jQuery 库包含以下功能:

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





          JS库:别人写好的JS文件,我们拿来直接用
            开发中,会引入很多的.js文件
            JQuery.js------濒临淘汰,经典。
                css库,bootstrap,layui,easyui。
            React.js-------
            Angular.js-----
            Vue.js---------简单。最主流

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

选择器

            基本选择器
                id选择器---返回值是固定的一个
                class选择器---返回值是一堆
                标签选择器---返回值是一堆
                *号选择器---返回值是所有标签
            层级选择器
               div p---div里的p,后代
               div>p---直接子元素 
               div+p---相邻
            过滤选择器
                :first---获取第一个元素
                :last---获取最后一个元素
                :eq(index)---给定位置的元素
                :gt(index)---大于给定位置
                :lt(index)---小于给定位置
                :not(selector)---除了selector以外的所有选择器
            内容选择器:
                :empty---匹配所有不包含子元素的选择器
                :parent---含有子元素的父元素
            属性选择器:
                [name]---包含name属性的元素
                input[type=text]---文本框
                input[type!=text]---除文本框的其他

Document
    <div id="container">
        <p id="p123">123</p>
    </div>

    <!-- 
        script标签:只可以做一件事情
        要么是导入js文件,要么是写js代码
     -->
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(() => {
            /*
                appendTo():参数是一个JQuery元素,追加到xxx
                prepareTo():在之前追加

            */
            $("<p>546</p>").appendTo($("#container"));
            $("<p>999</p>").prependTo($("#container"));
            $("<p>888</p>").insertAfter($("#container"));
            $("<p>777</p>").insertBefore($("#container"));

            $("#p123").replaceWith($("<p>666</p>"));
            // $("<span>000</span>").replaceAll($("p"));

            // 在内部的后面追加
            $("#container").append($("<p>100</p>"));
            $("#container").prepend($("<p>200</p>"));

            $("#container").after($("<p>5000</p>"));
            $("#container").before($("<p>6000</p>"));
            // 清空标签内的所有内容
            // $("#container").empty();
            $("p:gt(5)").remove();

        })
    </script>
</body>
Document
        <button id="checkAll">全选</button>
    </div>


    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(() => {
            // $("#div1").text("<p>123</p>");
            $("#username").val("666");
            /*
                属性操作:
                html() ===== innerHTML
                text() ===== innerText
                val() ====== input.value
                val()函数:可以给文本框赋值,
                    可以操作单选框,复选框,下拉菜单的选中状态
            */
           $("#checkAll").click(()=> {
                // $("#swimming").val("swimming");
                // 相当于setAttribute
                // getAttribute
                // alert($("input[type=checkbox]").attr("value","sss"));
                // alert($("input[type=checkbox]").attr("checked"));
                alert($("input[type=checkbox]").prop("checked",true));
                alert($("#sheng").prop("selected"));
           })
        })
    </script>
</body>

有关2022-8-26 jq简单了解的更多相关文章

  1. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项?我正在使用法拉第3.3。Faraday.get(url)四处寻找,我只能先发起连接后应用超时选项,然后应用超时选项。或者有什么简单的方法?这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  2. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不,不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本,提供另一个脚本,它将在其标准输入上获取请求,并在其标准输出上返回完整的响应。到目前为止一切顺利,但事实证明这真的很脆弱,因为它在第二个请求上中断并出现错误:/usr/b

  3. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  4. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么? - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找,但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中,因为我们有一些奇怪的身份验证规则,我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点,但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook,WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  5. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  6. Qt Designer的简单使用 - 2

    在前面两节的例子中,主界面窗口的尺寸和标签控件显示的矩形区域等,都是用C++代码编写的。窗口和控件的尺寸都是预估的,控件如果多起来,那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观,因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner(Qt设计师)。通过QtDesigner就可以很方便地创建图形界面文件*.ui,然后将ui文件应用到源代码里面,做到“所见即所得”,大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用,学习拖拽控件和设置控件属性,并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  7. ruby - 使用 Ruby,计算 n x m 数组的每一列中有多少个 true 的简单方法是什么? - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true?”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组,其中每个子数组代表一列,然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本,应该在1.8.6上运行,没有任何依赖:arr.transpose.map{|subarr|subarr.in

  8. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中,例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是,如果我制作一个2参数lambda用于像这样的注入(inject),multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数,但这给了我......irb(main):027:0>(5..10).inject

  9. ruby-on-rails - 如何测试自己对 Ruby/ROR 的了解? - 2

    是否有self验证的问题列表。看着那个,我可以确定我知道。我应该复习一下。在学习的过程中,我列了一个这样的list,但它只包含我在某处听说过的项目。我需要一段时间才能找到新的东西。 最佳答案 以下是针对ruby​​和Rails的一些测试列表。证书名称:RubyonRails谁提供:oDeskIncorporation认证费用:免费网站:https://www.odesk.com/tests/985?pos=0证书名称:RubyonRails提供者:Techgig.com(TimesBusinessSolutionsLimited(T

  10. ruby-on-rails - 了解 "attribute_will_change!"方法 - 2

    我想覆盖store_accessor的getter。可以查到here.代码在这里:#Fileactiverecord/lib/active_record/store.rb,line74defstore_accessor(store_attribute,*keys)keys=keys.flatten_store_accessors_module.module_evaldokeys.eachdo|key|define_method("#{key}=")do|value|write_store_attribute(store_attribute,key,value)enddefine_met

随机推荐