Jquery笔记

DOM对象通过jquery获取

所有的代码都是基于引入jquery.js文件

javascript 复制代码

var mydiv =$('#div');//直接获取到DOM对象元素id
var mydiv=$('.div')；//通过class获取DOM对象，如果有同名class只会获取第一个
var mysapn=$('span');//通过元素的标签名获取DOM对象
var divarr=$('#id,.class,span');//一次获取多个DOM对象
var all=$('*');//通用选择器
var houdai=$('#father div');//获取id为father下面所有的div
var zidai=$('#father>div')获取id为father下面直接的子级div
var xianglinxia=$('.one +img')//选择类名为one的下一个img元素
var tongbei=$('.one~img')//选择类名为one的之后的img元素 只会向下找不会向上找

表单类元素获取方法

DOM操作

1.获取属性

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">1111</div>
    <div id="box1">222</div>
    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aaanncc">
    <input type="checkbox" name="ch"  id="bb">
</body>
<script src="./jquery-3.7.0.js"></script>
<script>
//操作元素的属性
   //获取属性 attr('属性名') prop()
    //固有属性 标签自己带的属性 返回值是boolean的属性  自定义属性：自己定义的属性
    let ipt1name=$('#aa').attr('name')
    let ipt1names=$('#aa').prop('name')
    let ipt1boolean=$('#aa').prop('checked')
    let ipt1booleans=$('#aa').attr('checked')
    let ipt2boolean=$('#bb').prop('checked')//undefined
    let ipt2booleans=$('#bb').attr('checked')//false
    console.log(ipt1name,ipt1names,ipt1boolean,ipt2boolean,ipt2booleans);
   //设置属性
   $('#aa').attr('value',1)
   $('#bb').prop('value',2)
//    $('#bb').attr('checked',false)
   $('#bb').prop('checked',true);//设置boolean类型的有这个方便
   //移除属性 
   $('#aa').removeAttr('checked') 
</script>

</html>

2.操作元素的样式

javascript 复制代码

//操作元素的样式 
   //自己需要写css样式并且class名为sss
   $('#box1').attr('class','sss')//设置class名
   $('#box1').addClass('bbb')//追加calss名
   $('#box1').css('color',"red")//设置单个 
   $('#box1').css({
    'color':"red",
    "font-size":'46px'
   })//设置多个 
   $('#box1').removeClass('sss')

3.操作元素内容

javascript 复制代码

   //操作元素的内容
   $('#box1').html()//获取元素的内容非表单元素
   $('#box1').html('')//设置元素的内容非表单元素
   $('#box1').text()//获取元素的纯文本内容非表单元素不识别html元素
   $('#box1').text('')//设置元素的纯文本内容非表单元素 不识别html元素
   $('#box1').val()//获取元素的的值 表单元素 
   $('#box1').val('')//设置元素的的值 表单元素

元素的创建与删除

javascript 复制代码

  $('<p>这是一个p标签</p>')//创建一个p标签
    $('#box1').prepend('<p>小奶狗</p>')//在指定元素的内部最前面追加子元素
    $('<p>小狼狗</p>').prependTo($('#box1'))//在指定元素的内部最前面追加子元素
    $('#box1').append('<p>小狗</p>')//在指定元素的内部最后面面追加子元素
    $('<p>小狼狗</p>').appendTo($('#box1'))//在指定元素的内部最后面追加子元素
    $('#box1').before('<p>狗1</p>')//在指定元素的前面追加元素
    $('#box1').after('<p>狗2</p>')//在指定元素的后面追加元素
    $('#box1').after($('.box'))//在指定元素的后面追加元素

javascript 复制代码

 $('#box3').remove()//删除元素及其子元素标签内容一起删除
    $('#box4').empty()//只删除内容 很少用

遍历元素

javascript 复制代码

$('#box5').each(function(index,element){
        //index 下标 element元素
        console.log(index,element);
    })

绑定事件

javascript 复制代码

//绑定事件       这里改相对应的事件 change mouse
    $('#box4').bind('click',()=>{
        console.log('111')
    })

DOM对象通过jquery获取

DOM操作

1.获取属性

2.操作元素的样式

3.操作元素内容

遍历元素

绑定事件

ajax请求