广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解jquery方法属性
  • 410
分享到

详解jquery方法属性

2024-04-02 19:04:59 410人浏览 八月长安
摘要

目录1.Jquery简介2.jquery选择器2.1基本选择器5种2.2 关系选择器4种2.3基本过滤选择器8种2.4内容过滤选择器4种2.5可见性过滤选择器2种2.6属性过滤选择器

1.jquery简介

jquery是什么,作用是什么?

  • jquery用来简化js操作DOM元素
  • jquery不能用DOM的方法,DOM不能用jquery的方法

各种选择器的使用特征:

基本选择器5种:$(".#*,空格");

关系选择器4种:$(“空格>+~”)

基本过滤选择器8种:$(":first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector)")

内容过滤选择器4种:$(":contains(text)/:empty/:has(selector)/:parent")

可见性过滤选择器2种:$(":hidden/:visible")

属性选择器8种: ( " = = [ a t t r i b u t e ] [ a t t r i b u t e = v a l u e ] [ a t t r i b u t e ! = v a l u e ] [ a t t r i b u t e = v a l u e ] [ a t t r i b u t e ("==[attribute][attribute=value][attribute!=value][attribute^=value]、[attribute ("==[attribute][attribute=value][attribute!=value][attribute=value][attribute=value][attribute*=value][attributeFilter1][attrbuteFilter2]==")

子元素过滤选择器(4种)$(":nth-child(index/even/odd):first-child:last-child:only-child")

表单属性过滤选择器(4种)${":enabled/:disabled/:checked/:selected"}

表单选择器(11种)$(":input/:text/:passWord/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden")

2.jquery选择器

2.1基本选择器5种


    // 基本选择器5种
        $(".div");//类选择器
        $("div");//标签选择器
        $("#box");//id选择器
        $("*");//通配符选择器
        $("div,p,img");//合并选择器

2.2 关系选择器4种


    //关系选择器4种
        $("div p");//后代选择器
        $("div>p");//子代选择器
        $("div+p");//直接兄弟选择器
        $("div~p");//简洁兄弟选择器

2.3基本过滤选择器8种


// 基本过滤选择器8种
            $(":first");//第一个元素
            $(":last");//最后一个元素
            $(":not(selector)");//把selector排除在外
            $(":even");//挑选偶数行
            $(":odd");//挑选奇数行
            $(":eq(index)");//下标等于index的元素
            $(":gt(index)");//下标大于index的元素
            $(":lt(index)");//下标小于index的元素

2.4内容过滤选择器4种


        // 内容过滤选择器4种
            $(":contains(text)");//匹配包含给定文本的元素
            $(":empty");//匹配所有不包含子元素或文本的空元素
            $(":has(selector)");//匹配含有选择器所匹配的元素
            $(":parent");//匹配含有子元素或者文本的元素

2.5可见性过滤选择器2种


        // 可见性过滤选择器2种
            $(":hidden");//匹配所有不可见元素,或type为hidden元素
            $(":visible");//p匹配所有的可见元素

2.6属性过滤选择器8种


        // 属性过滤选择器8种
            $("[attribute]");//匹配具有attribute属性的元素
            $("[attribute=value]");//匹配属性值等于value的元素
            $("[attribute!=value]");//匹配属性值不等于value的元素
            $("[attribute^=value]");//匹配属性值以某些值开始的元素
            $("[attribute$=value]");//匹配属性值某些值结尾的元素
            $("[attribute*=value]");//匹配属性值以包含某些值的元素
            $("[attributeFilter1][attrbuteFilter2]");//复合属性过滤选择器,需要同时满足多个条件时使用

2.7子元素过滤选择器(4种)


        //子元素过滤选择器(4种)
            $(":nth-child(index/even/odd)")//选取每个父元素下的第index个子元素
            $(":first-child");//选取每个父元素的第一个子元素
            $(":last-child");//选取每个父元素的最后一个子元素
            $(":only-child");//如果某个元素是它父元素中唯一的子元素子元素,那么将会被匹配

2.8表单属性过滤选择器(4种)


        //表单属性过滤选择器(4种)
            $(":enabled");//选取所有可用元素
            $(":disabled");//选取所有不可用元素
            $(":checked");//选取所有被选中的元素
            $(":selected");//选取所有被选中的元素

2.9表单选择器(11种)


        // 表单选择器(11种)
            $(":input");//选择所有input/textarrea/select/button元素
            $(":text");//选取所有的单行文本框
            $(":password");//选取所有的密码框
            $(":radio");//选取所有的单选框
            $(":checkbox");//选取所有的复选框
            $(":submit");//选取所有的提交按钮
            $(":image");//选取所有的图像按钮
            $(":reset");//选取所有的重置按钮
            $(":button");//选取所有的按钮
            $(":file");//选取所有的上传域
            $(":hidden");//选取所有不可见的元素

3.jQuery中的DOM操作

3.1文本操作


        // 文本操作
        $("p").html();//相当于DOM中p.innerHtml;
        $("p").text();//相当于DOM中p.innerText;

3.2值操作


        // 值操作
        $("input:eq(5)").val();//相当于DOM中input.value;
        $("input:eq(6)").val("aaa");//设置属性值

3.3属性操作


 		// 属性操作
        $("#box").attr('name');//获取name属性
        $("#box").attr('name',"aaa");//添加name属性和值
        $("#box").removeAttr('name');//删除name属性
        $("#box").prop('checked');//获取单属性时,用prop获取的是false和true

3.4类操作


    	// 类操作
        $("#box").attr("class","");//获取和设置
        $("#box").addClass("class","");//追加类名
        $("#box").removeClass("class","");//移除类名
        $("#box").removeClass();//移除所有类名
        $("#box").toggleClass("main");//切换main类名
        $("#box").hasClass("main");//是否有某个类名

3.5样式操作


	//样式操作
        $("#box").CSS("color");//读取css样式值
        $("#box").css({"propertyname":"value","propertyname":"value"});//同时设置多个样式

4.节点操作

4.1遍历节点


		 //遍历节点
        $("#box").children();//获取子节点
        $("#box").children("div");//获取div子节点
        $("#box").prev();//找到上面紧邻的一个兄弟
        $("#box").prevAll();//找到上面紧邻的所有兄弟
        $("#box").prevAll("div");//找到上面紧邻的所有div兄弟
        $("#box").next();//找到下面紧邻的一个兄弟
        $("#box").nextAll();//找到下面紧邻的所有兄弟
        $("#box").nextAll("div");//找到下面紧邻的所有div兄弟
        $("#box").parent();//找到父节点

4.2过滤节点


    //过滤节点
        $("ul").find(".a");//查找
        $("ul li").filter(".a");//过滤

4.3创建、插入、删除


    // 创建、插入、删除
        var lis=$("<li title='aaa'>aaa</li>");//创建
        //内部添加
        parent.append(lis);//在父盒子尾部添加
        parent.prepend(lis);//在父盒子头部添加
        // 外部添加
        box.after(lis);//在box后面加
        box.before(lis);//在box前面加
        //删除DOM元素
        $("ul").remove();//完全删除,ul,li都删除
	    $("ul").empty();//只是清空ul的内容,ul还存在
	    $("li").remove(".one");//删除li中class="one"的

5.jquery事件


    // jquery事件
        // 与js的区别
            //  window.onload与$(document).ready()
            //区别一:前者页面完全加载后执行,后者在DOM完成加载后就执行,后者优先前者执行
            //区别二:前者多次出现时,最后的会覆盖前面的,后者多次出现时,他们会合并
            //区别三:有无简写:window没有简写,document有简写
                //简写:$().ready(function(){...})
                //      $(function(){....})
        //事件绑定:$(selector).on(事件类型,回调函数)
        $("ul li").on("click",function(){alert(1);});	
    // jquery 和  ajax
            // get方法
             $.get(url,data,success(response,status,xhr),dataType);
            //  post方法
            $.post(url,data,success(data, textStatus, jqXHR),dataType);

image-20211030195950325

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 详解jquery方法属性

本文链接: https://www.lsjlt.com/news/156878.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解jquery方法属性
    目录1.jquery简介2.jquery选择器2.1基本选择器5种2.2 关系选择器4种2.3基本过滤选择器8种2.4内容过滤选择器4种2.5可见性过滤选择器2种2.6属性过滤选择器...
    99+
    2022-11-12
  • jQuery的操作属性详解
    目录一、操作属性1、读取属性值:attr(属性名)2、修改属性值(1)attr(key,value)(2)attr(key,fn)(3)attr({属性名1:属性值,属性名2:属性值...
    99+
    2022-11-12
  • jquery方法的属性是什么
    这期内容当中小编将会给大家带来有关jquery方法的属性是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1.jquery简介jquery是什么,作用是什么?jquery用来简化js操作DOM元素jqu...
    99+
    2023-06-25
  • Python内置方法和属性详解
    目录1.1 _del_方法(知道)1.2 _str_ 方法总结 1.1 _del_方法(知道) 在Python中 当使用 类名()创建对象时,为对象 分配完空间后,自动 调用 _i...
    99+
    2022-11-12
  • jQuery操作属性值方法介绍
    一、获取或设置元素的属性值 attr()获取或设置匹配元素的属性值,语法如下: 获取元素属性值示例: <!DOCTYPE html> <html lang="en...
    99+
    2022-11-13
  • jquery中增加css属性的方法
    这篇文章主要介绍jquery中增加css属性的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jquery增加css属性的方法是css()方法,该方法能设置或返回被选元素的一个或多个样式属性,其设置增加css属性的...
    99+
    2023-06-15
  • Vue计算属性与监视属性实现方法详解
    目录一、计算属性1、插值语法实现2、通过方法实现3、通过计算属性二、监视属性三、深度监视一、计算属性 在开发中,可以有这样的需求,在属性(date)中,有fistName和lastN...
    99+
    2022-11-13
  • Vue的方法和属性案例详解
    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}...
    99+
    2022-11-12
  • python魔法方法-属性访问控制详解
    属性访问控制 所谓的属性访问控制就是控制点号访问属性的行为,而且不仅是类的外部,连类的内部也受控制,代码见真章,边看代码边解释: •__getattr__(self, item) 定义当访问不存...
    99+
    2022-06-04
    详解 访问控制 属性
  • python 特殊属性及方法详细解析
    目录概述特殊属性1、 _ _ name _ _2、_ _ bases _ _ 和_ _ base _ _ 以及 _ _ mro _ _3、_ _ class _ _4、_ _ dic...
    99+
    2022-11-12
  • Python Pycurl的属性与方法案例详解
    Pycurl包是一个libcurl的Python接口,由C语言编写的,功能强大,速度快。由于pycurl的属性和方法太多了,写这篇博文记录一下pycurl的属性和方法。 正常安装 p...
    99+
    2022-11-12
  • Echarts中legend属性使用的方法详解
    目录orientx/y(left/top)样式设置itemGapitemHeighttextStyleselecteddata补充:自定义legend属性总结Echarts的lege...
    99+
    2022-11-13
  • jQuery中DOM属性使用实例详解上篇
    目录DOM属性(上).addClass().removeClass().toggleClass().hasClass()DOM属性(上) .addClass() 为每个匹配的元素添加...
    99+
    2022-11-13
  • jQuery中DOM属性使用实例详解下篇
    目录DOM属性(下).html().val().attr().removeAttr()DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档...
    99+
    2022-11-13
  • jQuery中delegate()方法的用法详解
    delegate()是jQuery中一种事件委托的方法。事件委托是指将事件绑定到父元素而不是直接绑定到子元素,然后通过事件冒泡的方式来触发子元素上的事件。delegate()方法的语法如下:```javascript$(selector...
    99+
    2023-08-11
    jQuery
  • jQuery的remove()方法使用详解
    jQuery的remove()方法用于从DOM中移除元素。它可以同时删除元素及其所有子元素。下面是remove()方法的使用详解:基...
    99+
    2023-08-17
    jQuery
  • Android中persistent属性用法详解
    本文实例讲述了Android中persistent属性用法。分享给大家供大家参考,具体如下: 前段时间在研究telephony时,一直没有在framework下发现对telep...
    99+
    2022-06-06
    Android
  • WPF依赖属性用法详解
    一、什么是依赖属性 依赖属性就是一种自己可以没有值,并且可以通过绑定从其他数据源获取值。依赖属性可支持WPF中的样式设置、数据绑定、继承、动画及默认值。 将所有的属性都设置为依赖属性...
    99+
    2022-11-13
  • CSS 属性详解:颜色属性
    CSS 属性详解:颜色属性CSS(层叠样式表)是一种用于描述网页样式的标记语言。其中,颜色属性是CSS中最常用的属性之一。通过使用颜色属性,我们可以改变页面中元素的文字颜色、背景颜色、边框颜色等,从而实现视觉上的效果和美化。一、颜色值的表示...
    99+
    2023-10-25
    color (颜色) background-color (背景颜色) border-color (边框颜色)
  • python魔法方法-属性转换和类的表示详解
    类型转换魔法 类型转换魔法其实就是实现了str、int等工厂函数的结果,通常这些函数还有类型转换的功能,下面是一些相关的魔法方法: •__int__(self) •转换成整型,对应i...
    99+
    2022-06-04
    详解 属性 方法
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作