Day05 Jquery

一  引入Jquery文件

1、下载Jquery的js文件
2、在需要使用jquery的文件中引入js文件
            
            "$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。
            通过该对象可以获取 jQuery 对象,调用 jQuery 提供的方法等。
            
            注:只有 jQuery 对象才能调用 jQuery 提供的方法。

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

Uncaught ReferenceError: $ is not defined 报错原因:
            1、没有引入jquery文件
            2、引入的jquery文件顺序不对

        // 得到DOM对象
        var mydivDom = document.getElementById("mydiv");
        console.log(mydivDom);
        //console.log(document.getElementById("mydiv1"));
        
      
 // 得到Jquery包装集对象
        var mydivJquery = $("#mydiv");
        console.log(mydivJquery);
        //console.log($("#mydiv1"));
        
        /**
         * DOM对象转 Jqyery包装集对象
         *         将DOM对象放到$()括号中
         * Jqyery包装集对象转DOM对象
         *     Jqyery包装集取下标  Jqyery包装集[0]
         * /
        
/*DOM对象转 Jqyery包装集对象*/
        var dtoj = jQuery(mydivDom);
        var dtoj2 = $(mydivDom);
        console.log(dtoj);
        console.log(dtoj2);
        
      
 /*Jqyery包装集对象转DOM对象*/
        var jtod = mydivJquery[0];
        console.log(jtod);
        
        

        /*通过each()方法遍历 jQuery 对象数组得到的对象是 Dom 对象,可以通过$()转为 jQuery 对象*/
        mydivJquery.each(function(index,element){
            console.log(index);
            console.log(element);
            console.log($(element));
            console.log(this);
            console.log($(this));
        });

二   层次选择器

层次选择器 Hierarchy
选择器              名称                                  举例
后代选择器      ancestor descendant       $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器      parent > child           $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器      prev + next              $(".blue + img")选择 css 类为 blue 的下一个 img 元素(1、只找当前元素的下一个同级 2、只找一个)
 同辈选择器     prev ~ sibling                 $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

三   基础选择器

基础选择器 Basics
选择器               名称                 举例
id 选择器             #id                $("#testDiv")选择 id 为 testDiv 的元素(id属性值)
元素名称选择器  element         $("div")选择所有 div 元素 (元素名称)
类选择器            .class              $(".blue")选择所有 class=blue 的元素  (class属性值)

选择所有元素            *               $("*")选择页面所有元素
组合选择器          selector1,       $("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
                            selector2,
                            selectorN

四   表单选择器

过滤选择器
                 :checked:得到所有checked为true的元素
                 :eq(index):匹配指定下标的元素
                 :gt(index):大于指定下标的
                 
                 :odd  获取所有的奇数位置的元素
                 :even 获取所有的偶数位置的元素

        // 元素选择器
        var inputs = $("input");
        console.log(inputs.length);//只获取input标签的元素
        
        // 表单选择器
        var inps = $(":input");//获取所有的标签元素
        console.log(inps.length);
        
        // 获取所有的复选框
        var cks = $(":checkbox");
        console.log(cks);
        
        console.log($("input:checkbox"));

五  操作元素的属性

获取属性
                方法                                                                                 
                attr(属性名称)       获取指定的属性值,操作 checkbox 时选中返回checked,没有选中返回 undefined。      

举例           attr('checked')       attr('name')


                prop(属性名称)     获取具有 true 和 false 两个属性的属性值 

 举例          prop('checked')
            
设置属性
                attr("属性名","属性值")
                prop("属性名","属性值")
                
移除属性
                removeAttr("属性名")
            
            
attr()与prop()的区别:
            共同点:都可以获取元素的属性
            不同点:
                1、attr()可以获取自定义属性和固有属性的值,而prop()只能获取固有属性的值 (固有属性:元素本身就有的属性)
                2、操作返回值是boolean类型的属性时,attr()返回的是对应的值,而prop()返回的是true和false
                
如何选择:
                如果属性的返回值是boolean类型时,用prop()方法;  (checked、selected、disabled)
                如果是非boolean类型,则使用attr()方法

        // 获取元素的属性 (固有属性)
        var name1 = $("#ck1").attr("name");
        console.log(name1);
        var name2 = $("#ck2").prop("name");
        console.log(name2);
        
      
 // 获取元素的属性 (自定义属性属性)
        var a1 = $("#ck1").attr("aa");
        var a2 = $("#ck1").prop("aa");
        console.log(a1,a2);
        

        // 获取元素的属性 (设置过属性且属性返回值是boolean类型)
        var c1 = $("#ck1").attr("checked");
        var c2 = $("#ck1").prop("checked");
        console.log(c1,c2);
        

        // 获取元素的属性 (未设置过属性且属性返回值是boolean类型)
        var c11 = $("#ck2").attr("checked");
        var c22 = $("#ck2").prop("checked");
        console.log(c11,c22);
        
        

        // 设置元素的属性值
        $("#ck1").attr("value","1");
        $("#ck2").prop("value","2");
        
        // attr()
        $("#ck1").attr("checked","checked");
        $("#ck2").prop("checked",true);
        
        
      
 // 移除属性
        $("#ck1").removeAttr("name");

六   操作元素的样式

操作元素的样式

方法                              说明
attr(“class”)                   获取 class 属性的值,即样式名称
attr(“class”,”样式名”)     修改 class 属性的值,修改样式
addClass(“样式名”)       添加样式名称
css()                              添加具体的样式
removeClass(class)      移除样式名称

            
增加元素的具体样式,格式:
          (1)css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
                    例:css({"background-color":"red","color":"#fff"})2)css(“样式名”,”样式值”)
                    例:css('color','white')
           (2)css(“样式名”,”样式值”)
                    例:css('color','white')
                    
attr():            设置样式时,会重新设置class的属性值,所以会将原来的样式覆盖
addClass():   添加样式,原来的样式依然保留,如果出现了相同样式,以后定义的样式为准
css():             设置具体的样式(设置行内样式,写在style属性中的样式)
        // 设置元素的class属性
        $("#conRed").attr("class","red");
        $("#conBlue").attr("class","green");
        
    
    // 给元素添加元素
        $("#conRed").addClass("larger");
        $("#conRed").addClass("green");
        
      
 // 设置具体的样式
        // 设置一个样式
        $("#remove").css("color","chartreuse");
        
// 同时设置多个
        $("#remove").css({"font-weight":700,"height":"200px"});
        
        
// 移除样式  (样式名)
        $("#conRed").removeClass("larger");

七   操作元素的内容

操作元素的内容
                方法                         说明
                html()                     获取元素的 html 内容
                html("html 内容")         设定元素的 html 内容
                text()                     获取元素的文本内容,不包含 html
                text("text 内容")         设置元素的文本内容,不包含 html
                val()                     获取元素 value 值
                val(‘值’) 设定元素的 value 值
                
                html()和text()
                    html()可以识别数据中的html标签并 显示出来;
                    text()不识别html标签,会当做纯文本显示
                    取值时,html()能够获取到元素中的html代码,text()只会获取纯文本
                
表单元素:取值赋值使用 val()
                文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、(按钮)等
非表单元素:取值赋值使用  html()和text()
                div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
        // 获取表单元素的值
        var uname = $("#uname").val();
        console.log(uname);
      
 // 设置表单元素的值
        $("#uname").val("今天天气不错");
        var uname2 = $("#uname").val();
        console.log(uname2);
        
        
      
 // html()  和  text()
        // 设置非表单元素的值
        $("#html").html("你好");
        $("#text").text("你好");
        
        $("#html").html("<h2>你好</h2>");
        $("#text").text("<h2>你好</h2>");
        
      
 // 获取元素的值
        var html = $("#html").html();
        var txt = $("#html").text();
        console.log(html);
        console.log(txt);

八   创建元素,添加元素

创建元素
                $(‘元素内容’)
            
添加元素
                方法                                       说明
                prepend(content)                 在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
                $(content).prependTo(selector)   把 content 元素或内容加入 selector 元素开头
                append(content)                   在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
                $(content).appendTo(sector)        把 content 元素或内容插入 selector 元素内,默认是在尾部
                before()                                在元素前插入指定的元素或内容:$(selector).before(content)
                after()                                   在元素后插入指定的元素或内容:$(selector).after(content)
           

        /*创建元素*/
        var div = "<div>你好</div>";
        console.log(div);
        console.log($(div));
        
        /*添加元素*/
        // prepend()方法前追加内容
        $("#person").prepend("<span>小奶狗</span>");
        // prependTo()方法前追加内容
        $("<span>小狼狗</span>").prependTo($("#person"));
        
        // append()方法后追加内容
        $("#person").append("<span>舔狗</span>");
        // appendTo()方法后追加内容
        $("<span>老腊肉</span>").appendTo($("#person"));
        
        
        // 如果追加的元素是已存在的元素,则直接移动到指定元素中
        $("#person").append($(".red"));  
        
        
        // before()
        $(".blue").before("<span class='pink'>女神</span>");
        
        // after()
        $(".blue").after("<span class='skyblue'>歌手</span>");

九   删除元素,遍历元素

删除元素
                方法             说明
                remove()     删除所选元素或指定的子元素,包括整个标签和内容一起删。
                empty()     清空所选元素的内容
                
                
遍历元素
                each()
                $(selector).each(function(index,element)) :遍历元素
                参数 function 为遍历时的回调函数,
                index 为遍历元素的序列号,从 0 开始。
                element 是当前的元素,此时是 dom 元素。

 

        // 删除元素
        $(".green").remove();
      
 // 清空元素
        $(".blue").empty();
        
        
        // $(selector).each(function(index,element)) :遍历元素
        /*$(".pink").each(function(){
            console.log(this);
            console.log(this.innerHTML);
            console.log($(this).html());
        });*/
        
        $(".pink").each(function(index,element){
            console.log(index);
            console.log(element);
            console.log($(element).html());
        });

十   ready加载事件

ready()加载事件
                ready()类似于 onLoad()事件
                ready()可以写多个,按顺序执行
                $(document).ready(function(){})等价于$(function(){})
                
ready()加载事件和onload加载事件:
                ready()加载事件在dom结构(htm标签)加载完毕后,就执行
                onload加载事件在dom结构(htm标签)及引入的外部资源(js文件、css文件等)加载完毕之后才执行
           // JS
            window.onload = function() {
                console.log("js的预加载事件....");
            }
            
      
     // jquery
            $(document).ready(function(){
                console.log("jquery的预加载事件....");
                console.log($("#mydiv"));
            });
            
            $(function(){
                console.log("jquery的预加载事件2....");
            });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
校园悬赏任务平台对字典管理、论坛管理、任务资讯任务资讯公告管理、接取用户管理、任务管理、任务咨询管理、任务收藏管理、任务评价管理、任务订单管理、发布用户管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识,加上自己在学校课堂上学习的知识,决定开发系统选择小程序模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问,采用的主流的Java语言这种面向对象的语言进行校园悬赏任务平台程序的开发,在数据库的选择上面,选择功能强大的Mysql数据库进行数据的存放操作。校园悬赏任务平台的开发让用户查看任务信息变得容易,让管理员高效管理任务信息。 校园悬赏任务平台具有管理员角色,用户角色,这几个操作权限。 校园悬赏任务平台针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理任务信息,管理任务资讯公告信息等内容。 校园悬赏任务平台针对用户设置的功能有:查看并修改个人信息,查看任务信息,查看任务资讯公告信息等内容。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填写并提交这二者数据之后,管理员就可以进入系统后台功能操作区。项目管理页面提供的功能操作有:查看任务,删除任务操作,新增任务操作,修改任务操作。任务资讯公告信息管理页面提供的功能操作有:新增任务资讯公告,修改任务资讯公告,删除任务资讯公告操作。任务资讯公告类型管理页面显示所有任务资讯公告类型,在此页面既可以让管理员添加新的任务资讯公告信息类型,也能对已有的任务资讯公告类型信息执行编辑更新,失效的任务资讯公告类型信息也能让管理员快速删除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值