jquery方法属性详解

jquery方法属性详解!

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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 是一个非常流行的 JavaScript 库,它简化了 JavaScript 代码的编写和操作 DOM 的过程。以下是 jQuery 源码的逐行详解: ```javascript (function( global, factory ) { "use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { // 如果是 CommonJS 规范,则添加到模块中 // 在 Node.js 环境中,module 对象代表当前模块,exports 对象是 module 的属性,用于指定模块对外输出的接口。 // 通过 exports 对象把模块导出,其他文件就可以通过 require() 函数来引用该模块。 module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }; } else { // 如果是浏览器环境,则将 jQuery 添加到全局对象 window 中 factory( global ); } // 在这里传入了两个参数,global 和 factory,分别表示全局对象和一个工厂函数 }(typeof window !== "undefined" ? window : this, function( window, noGlobal ) { "use strict"; var deletedIds = []; var document = window.document; var slice = deletedIds.slice; var concat = deletedIds.concat; var push = deletedIds.push; var indexOf = deletedIds.indexOf; // ... ``` 这段代码定义了一个立即执行函数,其目的是为了防止变量污染全局作用域。如果是在 Node.js 环境中,那么需要将 jQuery 添加到模块中,否则将 jQuery 添加到全局对象 window 中。然后定义了一些变量,包括 deletedIds、document、slice、concat、push 和 indexOf 等。这些变量都是为了后面的代码服务。 ```javascript var version = "3.6.0", // 定义了一个空函数 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }, // ... ``` 这里定义了 jQuery 的版本号和 jQuery 函数。jQuery 函数是一个工厂函数,用于创建 jQuery 对象,其实现是通过调用 jQuery.fn.init 函数实现的。 ```javascript jQuery.fn = jQuery.prototype = { // jQuery 对象的方法属性 }; jQuery.fn.init.prototype = jQuery.fn; ``` 这里定义了 jQuery 对象的原型,包括 jQuery.fn 和 jQuery.prototype。jQuery.fn 和 jQuery.prototype 是等价的,都是为了扩展 jQuery 对象的方法属性。同时还将 jQuery.fn.init 的原型指向了 jQuery.fn,这样可以让 jQuery.fn.init 实例化出来的对象拥有 jQuery.fn 的方法属性。 ```javascript jQuery.extend = jQuery.fn.extend = function() { // ... }; jQuery.extend({ // 一些静态方法属性 }); jQuery.fn.extend({ // 一些实例方法属性 }); ``` 这里定义了 jQuery 的 extend 方法,用于实现对象的合并。同时还定义了一些静态方法属性,以及一些实例方法属性。 ```javascript jQuery.expr = { // ... }; jQuery.expr[ ":" ] = { // ... }; ``` 这里定义了 jQuery 的表达式引擎,用于实现选择器的解析。其中,jQuery.expr 是一个对象,存储了所有的选择器类型。jQuery.expr[ ":" ] 表示的是伪类选择器。 ```javascript jQuery.ajax = function( url, options ) { // ... }; jQuery.fn.load = function( url, params, callback ) { // ... }; ``` 这里定义了 jQuery 的 ajax 和 load 方法,用于实现异步请求和载入 HTML 片段。 ```javascript var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$; jQuery.noConflict = function( deep ) { // ... }; if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } ``` 这里定义了 jQuery 的 noConflict 方法,用于解决命名冲突问题。同时还保存了 window.jQuery 和 window.$ 的引用,以便在需要时恢复原来的状态。最后,将 jQuery 和 $ 添加到全局对象 window 中。 以上是 jQuery 源码的部分逐行详解,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值