其他分享
首页 > 其他分享> > day49

day49

作者：互联网

目录

JQuery介绍

  1. JQuery是一个轻量级、兼容多浏览器的js库，相当于python中的模块。
  2. JQuery使用户能够更方便的处理HTML Document、Evnets（事件触发器）、实现动画效果、方便进行Ajax（创建快速动态页面的技术）、交互，能够极大的简化js编程。它的总是就是：写很少的代码，做更多的事情

JQuery优势

  1. 一款轻量级的js框架。JQuery核心js文件才几十kb，不会影响页面的加载速度。
  2. 丰富的DOM选择器，JQuery的选择器用来很方便，比如要找到某个DOM对象的相邻的元素，js也是一行代码就能搞定。
  3. 链式表达式。JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax（创建快速动态页面的技术）操作支持。JQuery简化了AJAX操作。后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。JQuery基本兼容了现在主流的浏览器。
  7. 插件扩展开发。JQuery有丰富的第三方插件，如：树形的菜单、日期控件等等并且用JQuery插件可以做出的效果很炫酷，并且可以根据自己需要去改写和封装插件，简单实用。

JQuery版本

维护IE678是一件很麻烦的事情，所有一般我们会加载一个CSS和JS单独处理。

JQuery对象

JQuery对象就是通过JQuery包装DOM对象后产生的对象。如果一个对象是JQuery对象，那么可以使用JQuery里面的方法，

如：$(#d1).html():就是获取id值为d1的元素的html的元素的代码

html()是JQuery里面的方法

相当于document.getElementById('d1').innerHTML；

JQuery对象包装DOM对象后产生的,但是JQuery对象无法使用DOM对象里的方法，DOM对象也不能使用JQuery对象的的方法

声明JQuery对象的语法

声明变量的时候在前面加上$符号

var $variable = JQuery对象
var variable = DOM对象
$variable[0]对象转成DOM对象

例如：

$("#d1").html;   JQuery对象可以使用JQuery对象的方法
$("#d1")[0].innerHTML     DOM对象使用DOM对象的方法
这里把JQuery对象通过[0]的方式转为DOM对象

JQuery基本的语法

$(selector).action()

JQuery把文件导入模板中

在pycharm中依次操作file—>settings—>editor—>file and code templates—>在HTML File中的title标签下面添加JQuery的链接<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

在引入JQuery文件的时候，一般使用min的js文件，它是把原生的js文件压缩成英文的代码

注意：这里导入到模板中的链接必须在联网的情况下才能使用

查找标签

基本选择器

层级选择器

x和y可以为任意选择器

$("x y");  x所有的后代y元素(标签)
$("x>y"):  x的所有的儿子y元素(标签)
$("x+y");  找到所有的紧挨在x后面的y
$("x~y");  x之后所有的兄弟y

筛选器

基本筛选器

:first  第一个
:last   最后一个
:q(index)   索引值于指定值的那个元素
:even   匹配所有索引值为偶数的元素，从0开始计数
:odd    匹配所有索引为奇数的元素，从0开始计数
:get(index) 匹配所有大于给定索引值的元素
:lt(index)  匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找
$('div span:first')
$('span') 查找所有的span标签
$('div span:first')  查找第一个span
var $spanEle = $('span‘)[2]  这里一定要区分是JQuery对象还是标签(js对象),这里是DOM对象没有转换为JQuery，所以会报错

筛选器的方法
$($spanEle).next()   查找span标签内的下一个span标签
$($spanEle).nextAll()  查找多有的span对象
$($spanEle).nextUtil('#d2')这里是不包含

$spanEle.prev()  查一个span标签
$spanEle.prevAll()  同级别的
$spanEle.prevUntil('#d1')  查找不包含d1的span标签

$('u1 li:even')和$('u1 li:odd')的结果是一样的

例子：

$("div:has(h1)")    找所有厚点中有h1的div标签
$("div:has(c1)")     找到所有后代中所有c1样式类的div标签
$("li:not(c1)")     找到有不包含c1样式的li标签
$("li:not(:has(a))")    找到所有厚点中不含a标签的li标签

属性筛选器

[attribute]
[attribute=value]    属性等于
[attribute！=value]  属性不等于

$('div span:not(".c1")')

$('div span:has(".c1")')

筛后代元素是否有对应的属性

截图搜集

父亲元素
$('#d2').parent()
查到的是div#d1
$('#d2').parent().parent()
查到的是body
$('#d2').parent().parent().parent()
查到的是html文档流
$('#d2').parent().parent().parent().parent()
查到的是document文本 (最高能查到的层级)
$('#d2').parent().parent().parent().parent().parent()
这里就是prevObject对象了

$('#d2').parents()查找当前元素所有元素的父元素
$('#d2').parentsUntil('html')查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

儿子和兄弟元素
$('#d1').children()儿子
$('#d1').siblings()上下都算，兄弟
$('div').find('span')后代，搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法


$('div span').first()
$('div span:first')
这两者是完全等价的

$('div').removeClass('bg_red')移除
$('div').addClass('bg_red')添加
$('div').hasClass('bg_red')是否存在

$('div').toggleClass('bg_red')切换，有就移除，没有就添加(第一次)
显示的结果div.c1.bg_green
$('div').toggleClass('bg_red')切换(第二次，第一次切换后的)
显示的结果div.c1.bg_green.bg_red,

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

截图搜集

$('div').text()
会显示树形状的节点标签
$('div').html()
会显示所有的元素，包括标签、空格

$('div').text('<h1>今天有点冷啊</h1>')给标签设置值,不会显示添加的标签
$('div').html('<h1>今天有点冷啊</h1>')给标签设置值，<h1>标签会起作用。因为text是一个文本类型的，而html是文档流的

$('input').val()    不加参数就是获取值
$('input').val('你今天...')   加了参数就是设值

$('p').attr('id')获取id参数的标签
$('p').attr('username','json')   设置一个值
$('p').attr({'username':'json',"hobby":'study'}) 
设置多个值的时候以键值对的形式，设置
$('p').removeAttr('hobby')  移除

$('input').first().prop('checked'.'checked')设置$('input').first().prop('checked',false)移除
这里的false代表为设置input的内容为空，相当于移除

$('body').append(Ele)
body中添加
$(pEle).appendTo('body')
添加到body中
两者顺序不一样，但是效果是一样的

例子：

$(":checkbox")    找到所有的checkbox
例子input
$('[type="text"]')  找到text类型的标签
$('[type="password"]')   找到password的input标签
简单的写法
$(':text')
$(':password')
$(':file')
$(':button')

$(':checked')   checked会将select也查到

操作标签

样式操作

样式类

addClass();添加指定的css类名
removeClass();移除指定的css类名
hasClass();判断样式不存在
toggleClass();切换css类名，如果有就移除，没有就添加

例子：开关灯和模态框

CSS

css("color","red"); DOM操作：tag.style.color = "red"

例子：

$("p").css("color","red"); 将所有p标签的字体设置成红色

文本操作

HTML代码
html()  取得第一个匹配元素的html内容
html(val)  设置所有匹配元素的html内容

文本值
text()  取得所有匹配元素的内容
text(val)  设置所有匹配元素的内容

值
val()   取得第一个匹配元素的当前值
val(val)  设置所有匹配元素的值
val([val1,val2])   设置多选checkbox(复选框)、多选select的值

设置值
$("[name='hobby']").value(['basketball','football'])
$("#s1").value(["1","2"])

例子：
获取被选中的checkbox或radio(单选按钮)的值
<label for="c1">女</label>
<input name='gender' id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：
$("input[name='gender']:checked").val()

会在页面上渲染出一个文本框，输入信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
        <a href="">div>p>a</a>
    </p>
</div>
<input type="text">
</body>
</html>

文档处理

添加到指定元素内部的后面
$(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的后面

移除和清空元素
remove()// 从DOM中删除所有匹配的元素
empty()// 删除匹配的元素集合中所有的子节点

替换
replaceWith()    替换新元素
replaceAll()     替换所有的元素

把第一个<p>元素替换为新的文本
$("button").click(function)(){
    $("p:first").replaceWith("hello");
});

属性操作

用于ID等或自定义属性
attr(attrName)  返回第一个匹配元素的属性值
attr(attrName,attrValue)   为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2})   为所有匹配元素设置多个属性值
removeAttr()   从每一个匹配的元素中删除一个属性

用于checkbox和radio
prop   获取属性
removeProp   移除属性

注意：在1.x和2.x版本中使用JQuery会出现bug，在3.x中没有这个问题，为了兼容，处理复选框(checkbox和radio)时一般使用特定的prop(),不使用attr

prop和attr的区别

attr全称是attribute（属性）

prop全称是property（属性）

虽然都是属性，但他们所指的属性并不相同，

attr指的是THML树标签的属性

prop指的是DOM对象的属性

可以认为attr是显式的

prop是隐式的

例子：

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

针对上面的代码
$("#d1").attr("checked")   //undefined
$("#d1").prop("checked")   //false
总结：attr获取一个标签内没有的东西会得到undefined，prop获取的是这个DOM对象的属性，因此checked为false

<input type="checked" checked id="d1" value="1">
再次执行
$("#d1").attr("checked")   //checked
$("#d1").prop("checked")   //true
总结：证明了attr是局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没有选中返回false

自定义的情况下
<input type="checkbox" checked id ="d1" value="1" me="自定义的属性">
执行代码：
$("#d1").attr("me")    //自定义属性
$("#d1").prop("me")    //undefined
prop不支持获取标签的自定义的属性

总结：对于标签上有的属性和自定义属性都用attr
对于返回布尔值的比如：checkbox、radio和option的是否被选中都用prop
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">我是一只小小鸟</p>
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox" checked>rap
</body>
</html>

克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button {
            height: 50px;
            width: 100px;
            background-color: red;
            border: 3px solid darkgray;
            color: white;
        }
    </style>
</head>
<body>
<button>屠龙宝刀，点击就送</button>
<script>
    // var btnEle = $('button')[0];
    // btnEle.onclick = function () {
    //     // $(this).clone().insertAfter(this)
    //     // clone()默认是不克隆事件
    //     $(this).clone(true).insertAfter(this)
    // }
    $("button").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

位置操作

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

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

尺寸

height()
width()
innerHight()
innerWidth()
outerHight()
outWidth()
添加一个p标签
通过设置它的边框属性来达到改变高宽，内高内宽，外高外宽
<style>
        p {
            margin: 10px 20px 30px 40px;
            padding: 10px 20px 30px 40px;
            border: 3px solid red;
        }
    </style>

事件

常用的事件

click(function(){...})
hover(function(){...})   鼠标悬浮上去的时候触发
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件的绑定

.on(events[,selector],function(){})

events:事件

selector:选择器(可选的)

function:事件处理函数

移除事件：

.off(events[,selector][function(){}])

off()方法移除用.on()绑定的事件处理程序

events:事件

selector:选择器(可选的)

function:事件处理函数

阻止后续事件执行

return false; //常见阻止表单提交等

  $('input').click(function (e) {
        $(this).next().text('你追我~~~');
        // 如何阻止标签后续的事件
        // 方式1
        // return false
        // 方式2
        // e.preventDefault()
    })
一般使用方式一

input监听默认的事件

<script>
    $('input').on('input',function () {
        // 获取用户输入的内容
        console.log($(this).val())
    })

1)    $('input').on('focus',function () {
        // 获取用户输入的内容
        // console.log($(this).val())
        alert(123)   提示框提示信息
    })
    
 2)   $('input').focus(function () {
        alert(123)
        //获取用户输入的内容
    })
</script>

总结：1)2)的最终效果是一样的

总结：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种JQuery中定义的事件就不能用.on方法来绑定了

想使用委托的方式绑定hover事件处理函数，下面分两步绑定事件

$('ul').on('mouseenter','li',function(){//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('nouseleave','li',function(){//绑定鼠标划出事件
    $(this).removeClass('hover');
})；

阻止事件冒泡

<script>
    $('div').click(function (e) {
        alert('div')
    });
    $('p').click(function (e) {
        e.stopPropagation();
        alert('p');

    });
    $('span').click(function (e) {
        alert('span');
        e.stopPropagation()  // 阻止事件冒泡
    });

如果e只添加到span事件中，其他不添加，只显示span，事件p和事件div被阻止了

如果e只添加到p事件中，会显示span，然后是p

总结：
冒泡就相当于从池塘的下面往水面上冒气泡
e添加到哪里就  就只显示该事件

垃圾回收机制

标签：JQuery,function,span,标签,元素,day49,div
来源： https://www.cnblogs.com/gfhh/p/11892654.html