jQuery的一些练习题

找到本页面中id是i1的标签
$(’#i1’)
找到本页面中所有的h2标签
$(‘h2’)
找到本页面中所有的input标签
$(‘input’)
找到本页面所有样式类中有c1的标签
$(’.c1’)
找到本页面所有样式类中有btn-default的标签
$(’.btn-default’)
找到本页面所有样式类中有c1的标签和所有h2标签
$(’.c1,h2’)
找到本页面所有样式类中有c1的标签和id是p3的标签
$(’.c1,#p3’)
找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
$(.c1,.btn)
找到本页面中form标签中的所有input标签
$(‘form’).find(‘input’)
找到本页面中被包裹在label标签内的input标签
$(‘label input’)
找到本页面中紧挨在label标签后面的input标签
$(‘label+input’)
找到本页面中id为p2的标签后面所有和它同级的li标签
$(’#p2~li’)
找到id值为f1的标签内部的第一个input标签
$(’#f1 input:first’)
找到id值为my-checkbox的标签内部最后一个input标签
$(’#my-checkbox input:last’)
找到id值为my-checkbox的标签内部没有被选中的那个input标签
$(’#my-checkbox input(checked!=“checked”)’)
找到所有含有input标签的label标签
$(‘label:has(“input”)’)

将第一行p标签变成红色,第二行p标签变成绿色
$(‘p’).first().css(‘color’,‘red’).next().css(‘color’,‘green’)

克隆事件

<button id='d1'>点我复制</button>
<script>
	$('#d1').on('click',function(){
		$(this).clone(True).insertAfter($('body'))
	})
</script>

返回顶部

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>

自定义登录

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>

阻止后续操作或者阻止冒泡操作

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>


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

事件委托

<button>是兄弟，就来砍我!!!</button>

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

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

页面加载

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

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