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对应的数据

Jquery浅析的更多相关文章

  1. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  2. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  3. jQuery 3.0 的 Data 浅析

    jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...

  4. （转）【深入浅出jQuery】源码浅析2--奇技淫巧

    [深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html

  5. 【深入浅出jQuery】源码浅析2--使用技巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  6. jQuery内部原理和实现方式浅析

    这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQ ...

  7. 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法（转载）

    在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...

  8. jQuery 3.0的domManip浅析

    domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...

  9. 浅析angular，react，vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

随机推荐

  1. mysql树查询、递归查询

    关键词:mysql树查询,mysql递归查询 转自:http://www.cnblogs.com/c-h-y/p/9420726.html 之前一直用的是Oracle,对于树形查询可以使用start ...

  2. INPUT输入子系统——按键

    一.什么是input输入子系统? 1.1. Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的 ...

  3. Python学习第四十天函数的装饰器用法

    在软件开发的过程中,要遵循软件的一些原则封装的,不改变原有的代码的基础增加一些需求,python提供了装饰器来扩展函数功能,下面说说函数装饰器用法 def debug(func):      def ...

  4. k3 cloud套打模板中绑定加税合价字段的时候数据都为空，不绑定的时候显示正常

    检查bos中加税合计字段,是不是关联币别绑定错误

  5. Webpack Loader种类以及执行顺序

    我们在用webpack构建项目的时候,有两种配置打包文件的方式: import或者require :a-loader!b-loader!.././static/dog.png(打包某一个文件) 配置w ...

  6. 2018-8-10-sublime-Text-正则替换

    title author date CreateTime categories sublime Text 正则替换 lindexi 2018-08-10 19:16:52 +0800 2018-2-1 ...

  7. 使用python3搭建Linux-mariadb主从架构

    环境准备两台: 192.168.193.90 master 192.168.193.91 slave 需要Linux装python环境: https://www.cnblogs.com/kingzhe ...

  8. Qt Creator 不能输入中文怎么解决？

    Qt Creator 2.7.2不能输入中文怎么解决?之前提的问题自己后来找到解决方法后就忘了, 方法很简单,只要设置一下环境变量就行了export QT_IM_MODULE=ibus qt5.4.r ...

  9. [Luogu1220]关路灯（区间dp）

    [Luogu1220]关路灯 题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏 ...

  10. bzoj4408 [Fjoi 2016]神秘数 & bzoj4299 Codechef FRBSUM 主席树+二分+贪心

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4299 https://lydsy.com/JudgeOnline/problem.php?id ...