Jquery详解

目录

  • jquery

    • 通过jquery改变标签字体颜色
    • jquery和js对象之间值转化
    • Jquery基本选择器
    • Jquery层级选择器
    • 基本筛选器
    • 操作类属性
    • 模太框
    • 表单筛选器
    • 筛选器方法
    • 设置多个css样式：
    • 位置操作：
    • 尺寸：
    • 文本操作
    • 设置值：
    • 属性操作
    • 动态获取属性如用户选择
    • attr对checkbox和radio进行赋值操作时注意：
    • prop和attr的区别：
    • 文档处理
    • 克隆事件
    • 绑定事件的两种方式：
    • 取消标签自带的事件的两种方式：
    • 悬浮事件：
    • input实时获取可用于验证用户名是否存在：
    • 事件冒泡：
    • 事件委托
    • 文档加载：
    • 动画效果：
    • each循环：
    • Data零时仓库标签，可以让任何标签帮你存储数据

jquery

通过jquery改变标签字体颜色

$('#b1').css('color','black')
选择标签 指定css样式

jquery和js对象之间值转化

var d1Ele = document.getElementById('b1')
d1Ele

<div id="b1">
    lalallalalallal
</div>

// js拿到的是原生的js对象

$('#b1')
k.fn.init?[div#b1]
// 拿到的是jquery对象

var dEle = $('#b1')[0];
dEle

<div id="b1">
    lalallalalallal
</div>

// jquery对象转js对象

$(dEle)
k.fn.init?[div#b1]

// 原生js对象转jquery

// 注：js对象不能调用jquery对象的方法，反之亦然

Jquery基本选择器

  • id选择器
$('#d1')
  • 类选择器
$('.c1')
  • 标签选择器
$('p')
  • 组合选择器
$('#d1,.c1,p')  // 用逗号隔开

Jquery层级选择器

  • 后代选择器 下面的所有
$('#d1 span')
  • 儿子选择器 下面的一个缩进级别的
$('#d1>span')
  • 毗邻选择器 相邻
$('#d1+span')
  • 弟弟选择器 同级别的
$('#d1~span')

基本筛选器

  • 找全部
$('ul li')
  • 找第一个
$('ul li:first')
  • 找最后一个
$('ul li:last')
  • 按照索引去找
$('ul li:eq(2)')
  • 按照每个标签的偶数去寻找
$('ul li:even(2)')
  • 按照每个标签的基数去寻找
$('ul li:odd')
  • 索引大于多少的
$('ul li:gt(3)')
  • 索引小于多少的
$('ul li:lt(3)')
  • 不要哪一个索引
$('ul li:not(3)')
  • 指定标签中有哪些标签之类的取值
$('div').has('a')

操作类属性

  • 删除
$('.c1').removeClass('bg_green')
  • 有则删,无则加
$('.c1').toggleClass('bg_green')

模太框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.3);
            z-index: 999;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            margin-top: -100px;
            margin-left: -200px;
            z-index: 1000;
            background-color: white;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="show">出来吧</button>

<div class="cover hide"></div>
<div class="modal hide">
    <button id="cancel">消失吧</button>
</div>

<script>
    let b1Ele = $('#show')[0];
    let $cEle = $('.cover');
    let $mEle = $('.modal');
    let b2Ele = $('#cancel')[0];

    b1Ele.onclick = function () {
        $cEle.removeClass('hide');  // 删除
        $mEle.removeClass('hide')
    };

    b2Ele.onclick = function () {
        $cEle.addClass('hide');  // 添加
        $mEle.addClass('hide')
    }

</script>

表单筛选器

$('input[type='text']');
$(':text')  // 专门用来获取input这样的
$(':checked') // 会将option默认的selected属性标签也找到
$('input:checked'); // 这个时候加上标签名就会做精确度区分

筛选器方法

# 避免$('input:first')太麻烦
$('input').first()  // 找第一个元素

$("#id").next()  // 找下一个这个元素
$("#id").nextAll() // 找同级所有的
$("#id").nextUntil("#i2") // 知道找到什么为止，且不包含

$("#id").prev()  // 上一个
$("#id").prevAll()  // 上面所有的
$("#id").prevUntil("#i2")  // 知道找到什么为止，且不包含

$("#id").parent() // 找到自己的父标签
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

设置多个css样式：

$('#p1').css({'color':'red','width':'width','height':'400px'})
// 设置多个css样式需要使用自定义对象建值对形式

位置操作：

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸：

height():高度
width():宽度
innerHeight():  文本+padding
innerWidth():
outerHeight():   文本+padding+border
outerWidth():

文本操作

  • HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
  • 文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
  • 值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

设置值：

$(':text').val()  // 获取当前输入框的值
$(':text').val('嘿嘿嘿')； // 设置值

属性操作

  • 返回第一个匹配元素的属性值
$('#d1').attr('id')
  • 为所有匹配元素设置一个属性值
$('#d1').attr('name','lmd')
  • 为所有匹配元素设置多个属性值
$('#d1').attr({'name2':'lmd','name1':'lmd'})

动态获取属性如用户选择

$('#12').prop('checked')  // checked获取标签的属性
$('#12').removeProp() // 移除属性

attr对checkbox和radio进行赋值操作时注意：

// 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子：

<input type="checkbox" id="i1" value="1">

针对上面的代码

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false
attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

换成下面的代码：

<input type="checkbox" checked id="i1" value="1">

再执行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

执行以下代码：

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下：

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

  • 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
  • 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
  • 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
  • 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
  • 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
  • 替换
replaceWith()
replaceAll()

克隆事件

click:是绑定事件的名字
$('button').on('click',function()){
               alert(123)
               }

this:相当于self 是一个的对象
$('button').on('click',function()){
               $(this).clone()
               }

$('button').on('click',function () {
        $(this).clone().insertAfter(this);
    })
克隆标签:默认情况下只克隆标签的文本和样式不克隆事件 

clone加上true是克隆保留事件，克隆事件且标签如果存在的情况下会从当前位置移动走，然后添加到被选元素之后
$('button').on('click',function () {
        $(this).clone(true).insertAfter(this);
    })

绑定事件的两种方式：

// 第一种
        $('div').click(function(){
            事件代码
        })
// 第二种
        $('div').on('事件名',function(){
            事件代码
        })

取消标签自带的事件的两种方式：

// 第一种:
        return false
// 第二种,func要加上形参:
        e.preventDefault();

悬浮事件：

$('p').hover(  // 鼠标放上去的执行函数
    function () {
        alert('How Much?')
},
    function () {
        alert("欢迎老板下次再来，记得我是4号哟!")
    }
)

input实时获取可用于验证用户名是否存在：

$('input').on('input',function () {
    console.log(this.value)
});
// focus/blur 其他同理js事件

事件冒泡：

在一个标签内部，这层函数执行完成汇报给上一级如果上一级有事件就会被执行
阻止事件冒泡:
        在函数内部加一句取消事件冒泡的代码，需要加上形参e
div>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });

事件委托

将触发的的事件委托给内部某个标签去执行
无论改标签是初始化还是后期动态添加进去的
前期初始化了后期添加进来就没有事件效果了
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>

文档加载：

  • 第一种
$(document).ready(function(){ // 文件全部读取结束
                    // 在这里写你的JS代码...
                    })
  • 第二种
$(function(){  // 执行完成在执行这个函数
                // 你在这里写你的代码
                })
  • 第三种
// 直接在body内部最下方书写代码

动画效果：

// 标签记得设置高和宽

$('img').hide(5000) // 隐藏
$('img').show(5000) // 显示

$('img').slideDown(5000) //向上滑动隐藏
$('img').slideUp(5000) // 从底部向上滑入

$('img').fadeIn(5000) //  淡入
$('img').fadeOut(5000)// 渐隐
$('img').fadeTo(5000,0.4) // 淡出到一定到透明度

each循环：

$.each(array,function(index){
  console.log(array[index])
})  

$.each(array,function(){
  console.log(this);
})

// 支持简写
$divEles.each(function(){
  console.log(this)  // 标签对象
})

$.each($('div'),function(index)){
       console.log(index)
       }// 类似于for循环从array这个可迭代对象种循环取值交给后面的函数去执行

$('div').each(function){
  console.log(this)
}// 类似于for循环从array这个可迭代对象种循环取值交给后面的函数去执行

Data零时仓库标签，可以让任何标签帮你存储数据

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
$("div").data("k");//返回第一个div标签中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k对应的数据

原文地址：https://www.cnblogs.com/limengda/p/10976353.html

时间： 2024-10-14 05:06:13

Jquery详解的相关文章

$.extend()方法和(function($){...})(jQuery)详解

1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的.这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样.关于C# 中的字符串截取方法已

JQuery详解-JQuery入门环境的配置

JQuery是一个优秀的javascript库,凭借简洁的语法和跨平台的兼容性,极大的简化了JavaScript开发人员的工作. JQuery的入门介绍: 1.JQuery库类型说明: JQuery的库类型分为两种,分别是 2.获取JQuery的最新版本 登录jquery的官方网站(www.jquery.com),下载最新的JQuery库文件. 3.JQuery的环境配置 Jquery不需要安装,只需要把下载的库文件放到网站项目里,想要在某个网页使用JQuery,只需要在相关的HTML文档中引入

JQuery详解一

1.下载完jquery 需要在<head></head>区间引入 jquery框架(这里我用过的是1.91.1版本) <scprit language="javasscript" type ="text/javascript" src = "你的路径/jquery.1.9.1.min.js">红字这块最重要,language与type可以不写. 下面写一个简单的例子: <head> <titl

每日学习心得：$.extend()方法和(function($){...})(jQuery)详解

1.    JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的.这样就直接按照在C#中使用Substring的方式,直接在js中用了substring,在实际的项目中,有时候能得到正确的结果,但是有时候得到的结果却让人匪夷所思,后来仔细的调试跟踪之后才发现,原来是Js中substring的方法跟C#中的Substring方法不一样.关于C# 中的字符串截取方法已

$.extend()方法和(function($){...})(jQuery)详解 关于js 的 深入用法。“use strict”

这一次release的内容终于做完了,可以研究一下用到的东西. 以前写js 都是基本的写法, 写个function, 这次看到同事用jquery 加js 写的插件 用了自己不知道的新知识,觉得得有必要学习一下了. 1. "use  strict";   可以在写js 的文件中把这句话放上,不知道是什么意思 ,查了一下,应该是让js写法更严谨,当出现不符合要求的js,系统会报错 看解释给的一个例子  foo = ’aa': 当加了这句话就会报错.  大约就是语法更严谨了. 可以写到fun

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

jquery的2.0.3版本源码系列(3):285-348行，extend方法详解

目录 1 . jquery extend的基本使用 通过285行的源码 jQuery.extend = jQuery.fn.extend = function() { ,extend方法要么是直接挂在到jQuery的静态方法,要么是挂载到fn上其实就是原型上(参考283行的赋值操作)的实例方法.extend方法可以传一个对象,类似于插件的方式,也可以传多个对象进行拷贝. <script src="js/jquery-2.0.3.js"></script> <

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac