实例演示$()函数的四个参数，联系将课堂上提及的所有getter/setter方法

$()函数的四个参数

1. $(选择器,上下文): 获取元素

jQuery([selector,[context]])

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
中国一定强
<div  class="title"><h2>h2选择器</h2></div>
<script>
$("body").css('color','cyan');
$('body').css("backgroundColor",'yellow');
$(".title  h2").css('color','red');
$(".title  h2").css('backgroundColor','green');
</script>
</body>
</html>

2. $(js对象)

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
中国一定强
<div  class="title"><h2>h2选择器</h2></div>
<script>
$(document.body).css('color','cyan');
$(document.body).css('backgroundColor','red');
$(document.querySelector('.title h2')).css('backgroundColor','darkgreen');
$(document.querySelector('.title h2')).css('color','#000');
$(document.querySelectorAll('.title h2')).css('color','cyan');
</script>
</body>
</html>

3.html标签字符

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
中国一定强
<div  class="title"><h2>h2选择器</h2></div>
<script>
$("<span>人都爱美丽</span>").appendTo(document.querySelector(".title  h2"));
</script>
</body>
</html>

4.回调函数

$(function(){
// 文档就绪
});// $(document).ready() 的简写;当DOM加载完成后，执行其中的函数。

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
中国一定强
<div  class="title"><h2>h2选择器</h2></div>
<script>
$(function(){
alert('加载完成');
})
</script>
</body>
</html>

联系将课堂上提及的所有getter/setter方法

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
      </ul>
<h2></h2>
<form   action="">
<input    type="text"   name="user"  value="输入用户名">
<input    type="password"   name="password"  value="123456">
保密:<input  type="radio"   name="xinxi"    value='保密'  checked>公开:<input  type="radio"   name="xinxi"    value='公开'>
<button>提交</button>
<p></p>
</form>
<script>
$("body").css('color','cyan');
$('<span>'+$("body").css('color')+'</span>').appendTo($('h2'));
$('h2').attr('style',"color:red;display:block;width:300px;background-color:cyan");
$('h2').html();
$('h2').html("<p>通过html添加</p>");
$('h2').text();
$('h2').text('text设置文本').css('color',"blue").css('backgroundColor',"yellow");
$('form').attr('action',function(){  return  'index.php?id=11';  })
$('form')[0]===$('form').get(0);
$('form  input[name=user]').val('设置的用户名').css('color','red');
$('input[name=user]').val('设置的用户名').css('color','red');
$('form  input[name="password"]').css('color','green').val();
$('form  input[type="radio"]').attr('checked','');
$('form  input[type="radio"]')[0].checked
$('form  input[type="radio"]')[1].checked
</script>
</body>
</html>

效果：

$()函数的四个参数

1. $(选择器,上下文): 获取元素

2. $(js对象)

3.html标签字符

4.回调函数

联系将课堂上提及的所有getter/setter方法

相关文章