首页 > 其他分享 >day20 --> (JQuery基础)

day20 --> (JQuery基础)

时间:2022-11-24 23:44:58浏览次数:54  
标签:JQuery function -- 元素 day20 click 对象 选择器 css

 JQuery 基础:

1.概念:一个JavaScript框架。简化JS开发

JavaScript框架【简单理解】:本质上就是一些 js 文件,封装了js的原生代码而已

2.快速入门:

1、下载JQuery文件

jQuery-xxx.js 与 jquery-xxx.min.js的区别 :

jQuery-xxx.js : 开发版本,给程序员看的,有良好的缩进和注释,便于阅读

jquery-xxx.min.js :生产版本,程序中使用的,没有缩进,体积更小一点,程序加载更快

2、导入JQuery的js文件 : 导入min.js文件

3、使用

let div1 = $("#div1");
alert(div1.html());

3.JQuery对象和JS对象区别与转换:

JQuery对象在操作时更加方便
JQuery对象和js对象方法不通用
两者相互转换:
jq - > js : jq对象(索引)或者 jq对象.get(索引)
js - > jq : $(js对象)

4.选择器:筛选具有相似特征的元素(标签)

1.基本语法学习:

1、事件绑定

获取b1按钮
window.onload = function (){
$("#b1").click(function (){
alert("abc");
})
}

2、入口函数

JQuery入口函数,dom文档加载完成后执行的代码
$(function (){
$("#b1").click(function (){
alert("abcd");
})
})

window.onload 和 $(function) 区别:
window.onload 只能定义一次,如果定义多次,后边的会把前边的覆盖掉
$(function) 可以定义多次

3、样式控制

$(function (){
//$("#div1").css("backgroundColor","red");
$("#div1").css("background-color","pink");
})

2.分类:

(1)、基本选择器

1.标签选择器(元素选择器)

语法:$("html标签名") 获得所有匹配标签名称的元素

2.id 选择器:

语法:$("#id的属性值") 获得与指定id属性匹配的元素

3.类选择器:

语法:$(".class的属性值") 获得与指定的class属性值匹配的元素

4.并集选择器(用逗号隔开):

语法:$("选择器1,选择器2...") :获得多个选择器选中的所有元素

<script type="text/javascript">
        //说明:为了显示颜色不那么刺眼,使用pink 代替 red
        $(function (){
            // <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
            $("#b1").click(function (){
                $("#one").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
            $("#b2").click(function (){
                $("div").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
            $("#b3").click(function (){
                $(".mini").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
            $("#b4").click(function (){
                //并集选择器需要加逗号
                $("span,#two").css("backgroundColor","pink");
            })
        })
    </script>

(2)、层级选择器:

1.后代选择器:

语法:$("A   B ")  选择A元素内部的所有B元素

2.子选择器

语法:$("A > B") 选择A元素内部的所有B子元素

(3)属性选择器

1.属性名称选择器:

语法: $("A[属性名]") 包含指定属性的选择器

2.属性选择器:

语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器

3.符合属性选择器:

语法: $("A[属性名='值'][ ]...") 包含多个属性条件的选择器

<script type="text/javascript">
         $(function (){
             // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
             $("#b1").click(function (){
                 $("div[title]").css("backgroundColor","pink");
             })
             // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
             $("#b2").click(function (){
                 $("div[title='test']").css("backgroundColor","pink");
             })
             // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
             $("#b3").click(function (){
                 $("div[title != 'test']").css("backgroundColor","pink");
             })
             // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
             $("#b4").click(function (){
                 $("div[title ^='te']").css("backgroundColor","pink");
             })
             // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
             $("#b5").click(function (){
                 $("div[title $= 'est']").css("backgroundColor","pink");
             })
             // <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
             $("#b6").click(function (){
                 $("div[title *= 'es']").css("backgroundColor","pink");
             })
             // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
             $("#b7").click(function (){
                 $("div[id][title *= 'es']").css("backgroundColor","pink");
             })
         })
    </script>

 

 (4)、过滤选择器

1.首元素选择器

语法: :first  获得选择的元素的第一个元素

2.尾元素选择器

语法: :last  获得选择的元素中的最后一个元素

3.非元素选择器

语法: :not(selector)  不包括指定内容的元素

4.偶数选择器

语法: :even  偶数,从 0 开始计数

5.奇数选择器

语法: :odd  奇数,从 0 开始计数

6.等于索引选择器

语法: :eq(index)  指定索引元素

7.大于索引选择器

语法::gt(index)  大于指定索引元素

8.小于索引选择器

语法: :lt(index)  小于指定索引元素

9.标题选择器

语法: :header  获得标题元素(h1 ~ h6),固定写法

    <script type="text/javascript">
        $(function (){
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
            $("#b1").click(function (){
                $("div:first").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function (){
                $("div:last").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function (){
                $("div:not(.one)").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function (){
                $("div:even").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function (){
                $("div:odd").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function (){
                $("div:gt(3)").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function (){
                $("div:eq(3)").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function (){
                $("div:lt(3)").css("backgroundColor","pink");
            })
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function (){
                $(":header").css("backgroundColor","pink");
            })
        })
    </script>

(5)、表单过滤选择器

1.可用元素选择器

语法: :enabled 获得可用元素

2.不可用元素选择器

语法: :disabled 获得不可用元素

3.选中选择器

语法: :checked 获得单选/复选框选中的元素

4.选中选择器

语法: :selected  获得下拉框中的元素

<script type="text/javascript">
        $(function (){
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
            $("#b1").click(function (){
                $("input[type='text']:enabled").val("aaa");
            });
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
            $("#b2").click(function (){
                $("input[type='text']:disabled").val("bbb");
            })
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
            $("#b3").click(function (){
                let length = $("input[type='checkbox']:checked").length;
                alert(length);
            });
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
            $("#b4").click(function (){
                let length1 = $("#job > option:selected").length;
                alert(length1);
            });
        });
    </script>

 

 (5).DOM操作

1.内容操作

1、html() : 获取/设置元素的标签体内容,<a><font>内容</font></a>  --> <font>内容</font>

2、text() : 获取/设置元素的标签体的纯文本内容,<a><font>内容</font></a>  --> 内容

3、val() : 获取/设置元素的value属性值

        <script>
            $(function (){
                // 获取myinput 的value值
                /*let value = $("#myinput").val();
                alert(value);

                $("#myinput").val("李四");*/

                // 获取mydiv的标签体内容
                /*let html = $("#mydiv").html();
                alert(html);

                $("#mydiv").html("aaa");*/

                // 获取mydiv文本内容
                /*let text = $("#mydiv").text();
                alert(text);

                $("#mydiv").text("bbb")*/
            })
        </script>

 

2.属性操作

1、通用属性操作

1.attr() : 获取/设置元素的属性

2.removeAttr() : 删除属性

3.prop() : 获取/设置元素的属性

4.removeProp() : 删除属性

 

attr & prop :

1、如果操作的是元素的固有属性【eg: <a href = "#"> </a>】,则建议使用prop

2、如果操作的是元素自定义的属性,则建议使用 attr 

    <script type="text/javascript">
    
        $(function (){
            //获取北京节点的name属性值
            /*let name = $("#bj").attr("name");
            alert(name);*/

            //设置北京节点的name属性的值为dabeijing
            /*let name = $("#bj").attr("name","dabeijing");
            alert($("#bj").attr("name"));*/

            //新增北京节点的discription属性 属性值是didu
            /*$("#bj").attr("discription","didu");
            alert($("#bj").attr("discription"));*/

            //删除北京节点的name属性并检验name属性是否存在
            //$("#bj").removeAttr("name");

            //获得hobby的的选中状态【固有属性使用prop】
            /*let checked = $("#hobby").prop("checked");
            alert(checked);*/
        });
        
    </script>

 

2、对 class 属性操作

1.addClass() : 添加class属性值

2.removeClass() : 删除class属性值

3.toggleClass() : 切换class属性 【存在添加、不存在删除】

toggleClass("one") : 判断如果元素对象上存在 class = "one" ,则将属性值 one 删除掉。如果元素对象上不存在 class = "one" ,则添加

4. css() : 单个值【属性值】 --> 获取属性名;键值对 【属性,属性值】:设置css样式

<script type="text/javascript">
        $(function (){
            //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            $("#b1").click(function (){
                $("#one").prop("class","second");
            });

            //<input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function (){
                $("#one").addClass("second");
            });

            //<input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function (){
                $("#one").removeClass("second");
            });

            //<input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function (){
                $("#one").toggleClass("second");
            });

            //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function (){
                let color = $("#one").css("backgroundColor");
                alert(color);
            });

            //<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function (){
                $("#one").css("backgroundColor","green");
            });
        });
    
    </script>

 

3.CRUD操作

1、append() : 父元素将子元素添加到末尾

对象1.append(对象2) : 将对象2添加到对象1的内部【末尾位置】

2、prepend() : 父元素将子元素追加到开头

对象1.prepend(对象2) : 将对象2添加到对象1的内部【开头位置】

3、appendTo() : 【to :到】

对象1.appendTo(对象2) :将对象1添加到对象2的内部【末尾位置】

4、prependTo()

对象1.prependTo(对象2) : 将对象1添加到对象2的内部【开头位置】

5、after() : 添加元素到对应的元素后边

对象1.after(对象2) : 将对象2添加到对象1的后边。对象1 和 对象2 时兄弟关系

6、before() :  添加元素到对应元素的前边

对象1.before(对象2) : 将对象2添加到对象1的前边。对象1 和 对象2 时兄弟关系

7、insertAfter() : 

对象1.insertAfter(对象2) : 将对象2添加到对象1后边。对象1 和 对象2 时兄弟关系

8、insertBefore() : 

对象1.insertBefore(对象2) : 将对象2添加到对象1的前边。对象1 和 对象2 时兄弟关系

     <script type="text/javascript">
         $(function (){
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
             $("#b1").click(function (){
                 //$("#city").append($("#fk"));

                 $("#fk").appendTo($("#city"));

             });

             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function (){
                 //$("#city").prepend($("#fk"));
                 $("#fk").prependTo($("#city"));
             });


             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function (){
                 //$("#tj").after($("#fk"));
                 $("#fk").insertAfter($("#tj"));
             });

             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function (){
                 //$("#tj").before($("#fk"));
                 $("#fk").insertBefore($("#tj"));
             })
         })
         
    </script>

 

9、remove() : 移除元素

对象.remove() : 将对象删除掉 【哪个对象调用remove,就删除哪个对象】

10、empty() : 清空元素的所有子元素【后代元素】

对象.empty() : 将对象的所有后代元素全部清空,但是保留当前对象对象属性节点

    <script type="text/javascript">
        $(function (){
            // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
            $("#b1").click(function (){
                $("#bj").remove();
            })

            // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
            $("#b2").click(function (){
                $("#city").empty();
            })
        })
    
    </script>

 

(6)案例:

1、隔行换色:

        <script>
            //需求:将数据行的奇数行背景色设置为 pink,偶数行背景色设置为 yellow
        $(function (){
            //1、获取数据行中奇数行tr,设置背景色为pink
            $("tr:gt(1):odd").css("backgroundColor","pink");
            //2、获取数据行中的偶数行tr,设置背景色为 yellow
            $("tr:gt(1):even").css("backgroundColor","yellow");
        })
        </script>

 

2、全选和全不选:

        <script>
            function selectAll(obj){
                $(".itemSelect").prop("checked",obj.checked);
            }
        </script>

 

3、QQ表情选择:

    <script>
        //需求:点击qq表情,将其追加到发言框中
        $(function (){
            $("ul img").click(function (){
                //$(".word").append(this); //上边表情移动到下边
                //$(".word").append(this.clone()); //js对象能调用jq方法
                $(".word").append($(this).clone()); //js对象 --> jq对象,调用jq方法
            })
        })
        
    </script>

 

4、多选下拉列表作用移动:

        <script>

            //需求:实现下拉列表选择条目左右选择功能
            $(function (){
                $("#toLeft").click(function (){
                    //获取右边下拉列表中选中的条目追加到左边
                    $("#leftName").append($("#rightName > option:selected"));
                });

                $("#toRight").click(function (){
                    //获取左边下拉列表中选中的条目追加到右边
                    $("#rightName").append($("#leftName > option:selected"));
                })
            });

        </script>

 

 

标签:JQuery,function,--,元素,day20,click,对象,选择器,css
From: https://www.cnblogs.com/yumengqifei/p/16921463.html

相关文章

  • ES5 新增数组方法 ES6 新增数组方法
    ES5新增数组方法|对象调用的方法|作用|返回值||---------------------------------......
  • 算法5: LeetCode_单链表_两数相加
    题目:*给你两个非空的链表,表示两个非负的整数。它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储一位数字。*请你将两个数相加,并以相同形式返回一个......
  • 学习《Python编程 从入门到实践》第二、三天
    近期比较忙,宝宝的预产期是12月17日,老婆每天都跟我说准备要生了。所以昨天看了一会就做家务活了,练习完后忘记写日记了。今天给补上。 为什么突然想学编程呢?其实是平常......
  • 读图片然后存储
    importcv2f=open('错误.txt')foriinf.readlines():  sum=sum+1  ifsum>924:    break  i=str(i).strip('\n')#去除回车。  color_im......
  • javaweb2
    Servlet核心1.核心类与接口init:完成初始化操作只会执行一次没有配置1时才只会执行一次在实例类对象中配置(注解方式)@WebServlet(vlue="路径",loadonstartu......
  • 深入理解Kubernetes 4A - Authorization源码解析
    Overview在Kubernetes中,当一个访问请求通过了登录阶段(Authentication),必须还需要请求拥有该对象的访问权限,而授权部分也是KubernetesAPI访问控制中的第二个部分Author......
  • 中缀表达式求值
    中缀表达式指的是形如(15+(32-1)×5+14÷2)的表达式,这种就是我们通常见到的书写算式顺序,但在实际的计算机运算中要计算中缀表达式则首先要将字符串转换为后缀表达式,然后......
  • 20221124
    为什么越来越有种感觉,最终肯定会分开.如果知道结局,还有必要继续下去吗?两个人都没问题。那问题出在哪呢?我太喜欢吃醋了,又是对谁都很活泼开朗的,如果一开始就不认识还好,......
  • vue3中watch监听不是你想的那样简单
    vue3中watch监听数组,数组变化后未触发回调今天发生了一个很神奇的现象,就是我使用watch监听数组时。被监听的数组已经发生了变化。但是没有触发回调操作。当时的我感到......
  • JVM(一)--JVM介绍和Class File
    什么是JVM流程图(代表一次编译到处运行)Java虚拟机与物理机对比Class文件类比输入设备CPU指令集类比输出设备JVM类比存储器、控制器、运算器等JVMproducts最常......