标签：jQuery span 标签 pEle div d1

一、jq简介

jQuery内部封装了原生的js代码(还额外添加了很多的功能)，能够通过书写更少的代码 完成js操作 ，类似于python里面的模块 在前端模块不叫模块 叫 “类库”，兼容多个浏览器的 ，在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery文件下载，压缩后的容量更小，未压缩的是源码

1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加 ：配置=>编辑=>file and code template

2、直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:bootcdn

缺点：计算机要有网络

src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

pycharm自动导入

jq的基本语法

jQuery(属性).action()

// 简写  jQuery写成$
$(属性).action()

//代码对比
//js
let pEle = document.getElementById('d1')
pEle.style.color = 'red'

// jQuery操作标签
$('p').css('color','blue')

二、选择器

1、基本选择器

        // id选择器
        $('#d1').css('color','red')

        // class选择器
        $('.d1').css('color','red')

        // 标签选择器
        $('div').css('color','red')

		//注意
        // jQuery对象如何变成标签对象
        $('#d1')[0]
        <div id=​"d1">​…​</div>​

        document.getElementById('d1')
        <div id=​"d1">​…​</div>​

        // 标签对象如何转jQuery对象
        $(document.getElementById('d1'))
        w.fn.init [div#d1]

2、组合选择器

// 标签
$('div')

// 类为c1的div
$('div.c1')

//id为d1的div
$('div#d1')

// 可以拿到所有的，html head·····，一般不使用
$('*')

               
$('#d1,.c1,p')  // 并列+混用
// [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]

// 后代
$('div span')  
//w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

//儿子
$('div>span') 
//w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

//毗邻
$('div+span') 
//w.fn.init [span, prevObject: w.fn.init(1)]

//弟弟
$('div~span')  
//w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

3、基本筛选器

// 获取所有的li
$('ul li')

//获取第一个li              
$('ul li:first') 

//获取最后一个li                 
$('ul li:last')  

// 获取索引为2的li               
$('ul li:eq(2)')		

// 获取偶数的li              
$('ul li:even')  

// 获取奇数的li              
$('ul li:odd') 

// 大于，获取索引大于2的li              
$('ul li:gt(2)')  

// 小于索引 获取索引小于2的li             
$('ul li:lt(2)') 

//移除满足条件的标签              
$('ul li:not("#d1")')  

         
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]

// 选取出包含一个或多个标签在内的标签
$('div:has("p")')  
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')

$('[username="jason"]')

$('p[username="egon"]')


$('[type]')

$('[type="text"]')

3、表单选择器

$('input[type="text"]')

$('input[type="password"]')


$(':text')  //简写 等价于上面第一个

$(':password')  //简写 等价于上面第二个



:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected

//注意注意
$(':checked')  // 它会将checked和selected都拿到

$(':selected')  // 它不会 只拿selected

$('input:checked')  // 自己加一个限制条件

4、筛选器方法

//同级别下一个
$('#d1').next()  

//拿到所有的
$('#d1').nextAll()


//不包括最后一个 从id为1到c1
$('#d1').nextUntil('.c1')  

              
// 上一个              
$('.c1').prev()  

//所有的
$('.c1').prevAll()

//不包括最后一个
$('.c1').prevUntil('#d2')

// 第一级父标签，可以一直查，直到document就没有了           
$('#d3').parent()  

$('#d3').parent().parent()

$('#d3').parent().parent().parent()

$('#d3').parent().parent().parent().parent()

$('#d3').parent().parent().parent().parent().parent()


// 直接查所有的父亲，只到html
$('#d3').parents()

$('#d3').parentsUntil('body')

              
// 儿子              
$('#d2').children()  
 
// 同级别上下所有
$('#d2').siblings()  
              
              
// find从某个区域内筛选出想要的标签  这两个相等             
$('div p')         
$('div').find('p')  
              
              
"""下述两两等价"""
$('div span:first')
$('div span').first()

                                                                                    
$('div span:last')
$('div span').last()
                                                                                    

$('div span:not("#d3")')
$('div span').not('#d3')

三、操作标签

​ js操作类 jQuery操作类

classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()

1、样式操作

jQuery的链式操作:使用jQuery可以做到一行代码操作很多标签

jQuery对象调用jQuery方法之后返回的还是当前jQuery对象,也就可以继续调用其他方法

<p>111</p>
<p>222</p>
$('p').first().css('color','red').next().css('color','green')

2、位置操作

offset()  // 相对于浏览器窗口
position()  // 相对于父标签

scrollTop() //滚动屏幕

$(window).scrollTop()  // 括号内不加参数就是获取

$(window).scrollTop(0)  // 加了参数就是设置
 
$(window).scrollTop(500)
 
scrollLeft()

尺寸

$('p').height()  // 文本
$('p').width()

$('p').innerHeight()  // 文本+padding
$('p').innerWidth()

$('p').outerHeight()  // 文本+padding+border
$('p').outerWidth()

3、文本操作

innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()

$('div').text('离离原上草')

$('div').html('离离原上草')

// 无法识别html标签
$('div').text('<h1>离离原上草</h1>')

// 可以识别html标签
$('div').html('<h1>离离原上草</h1>')

获取值操作，对应input框

js :.value

jQuery:.val()

$('#d1').val()
$('#d1').val('520快乐')  // 括号内不加参数就是获取加了就是设置

$('#d2')[0].files[0] //拿到文件对象需要转换为js

4、属性操作

js中： jQuery：
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)

在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象

let $pEle = $('p')

$pEle.attr('id') // 获取"d1"

$pEle.attr('class')
$pEle.attr('class','c1')

$pEle.attr('id','id666') // 添加

$pEle.attr('password','jason123') // 添加

$pEle.removeAttr('password') //移除

//对于标签上有的能够看到的属性和自定义属性用attr,对于返回布尔值比如checkbox radio option是否被选中用prop

$('#d2').prop('checked')

$('#d2').prop('checked')

$('#d3').prop('checked',true) // 设置值，会自动选中

$('#d3').prop('checked',false)

5、文档处理

js jQuery
createElement('p') $('

')
appendChild() append()

let $pEle = $('<p>')
$pEle.text('你好啊')
$pEle.attr('id','d1')  

// 内部尾部追加  添加方式不一样，但是效果是一样的
$('#d1').append($pEle)  
$pEle.appendTo($('#d1')) 

//添加方式不一样，但是效果是一样的
$('#d1').prepend($pEle)  // 内部头部追加
$pEle.prependTo($('#d1'))

 // 放在某个标签后面         
$('#d2').after($pEle) 
$pEle.insertAfter($('#d1'))

//  放在某个标签前面
$('#d1').before($pEle)
$pEle.insertBefore($('#d2'))

// 将标签从DOM树中删除
$('#d1').remove()  

// 清空标签内部所有的内容           
$('#d1').empty() 

四、jQuery事件

1、绑定事件

// 第一种
    $('#d1').click(function () {
            alert('hello')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('hello')
    })

克隆事件

<button id="d1">点我点我点我</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

    })
</script>

左侧菜单栏

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>

2、阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('how are you?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

3、阻止事件冒泡

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

4、事件委托

<button>点我</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

5、页面加载

// 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
// 第一种
$(document).ready(function(){
  // js代码
})
// 第二种
$(function(){
  // js代码
})
// 第三种
"""直接写在body内部最下方"""

标签：jQuery,span,标签,pEle,div,d1
来源： https://www.cnblogs.com/xionghuan01/p/16589159.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。