1. 在页面中选取所有<p>元素并隐藏所有<p>元素
1 $('p').click(function(){ 2 $(this).hide(); 3 });
2. id选择器，通过id选择指定的元素
$('#a').click(function(){
//选取第一个p元素
$('p:first').hide();
});
3. class选择器
$('#d').click(function(){
$('.te').hide();
});
4. 点击p段落触发
$('p').click(function(){
$(this).hide();
});
5. 双击触发事件
$('p').dblclick(function(){
$(this).hide();
});
6. 鼠标滑过触发事件
1 $('#a').mouseenter(function(){ 2 alert('你的鼠标滑过id="a"的元素上'); 3 });
7. 设置内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$('#btn1').click(function(){
$('#p1').text("hello world");
});
$('#btn2').click(function(){
$('#p2').html("Hello World");
});
$('#btn3').click(function(){
$('#txt1').val('你好');
});
8. 使用 jQuery AJAX 修改文本内容
1 $("#btn4").click(function(){ 2 $("#div1").load("/jquery_Day1/1.txt"); 3 });
完整HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 7 <script> 8 // 在DOM文档加载完成后才可以对DOM进行操作 9 // $(document).ready(function(){ 10 // 在页面中选取所有<p>元素 11 // $('p').click(function(){ 12 // $(this).hide(); 13 // }); 14 // }); 15 // 简洁写法 16 $(function(){ 17 //开始写jQuery代码 18 // id选择器，通过id选择指定的元素 19 $('#a').click(function(){ 20 //选取第一个p元素 21 $('p:first').hide(); 22 }); 23 // class选择器 24 $('#d').click(function(){ 25 $('.te').hide(); 26 }); 27 // //点击p段落触发 28 $('p').click(function(){ 29 $(this).hide(); 30 }); 31 // 双击触发事件 32 $('p').dblclick(function(){ 33 $(this).hide(); 34 }); 35 // 鼠标滑过触发事件 36 $('#a').mouseenter(function(){ 37 alert('你的鼠标滑过id="a"的元素上'); 38 }); 39 $('#btn1').click(function(){ 40 $('#p1').text("hello world"); 41 }); 42 $('#btn2').click(function(){ 43 $('#p2').html("Hello World"); 44 }); 45 $('#btn3').click(function(){ 46 $('#txt1').val('文本值'); 47 }); 48 $("#btn4").click(function(){ 49 $("#div1").load("/jquery_Day1/1.txt"); 50 }); 51 52 53 54 }); 55 56 57 58 </script> 59 </head> 60 <body> 61 <p>如果你点我，我就会消失</p> 62 <p>继续点我</p> 63 <p>接着点我</p> 64 <h2>这是一个标题</h2> 65 <p>这是一个段落</p> 66 <p >这是另一个段落</p> 67 <p class="te">class选择器</p> 68 <button id='a'>点我</button> 69 <button id="d">点我吧</button> 70 <br /> 71 72 73 <p id='p1'>这是一个段落</p> 74 <p id='p2'>这是另一个段落</p> 75 <p>输入框:<input type="text" id="txt1" value="文本框" /></p> 76 <button id='btn1'>设置文本</button> 77 <br /> 78 <button id="btn2">设置HTML</button> 79 <br /> 80 <button id="btn3">设置值</button> 81 82 <br /> 83 <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div> 84 <button id="btn4">获取外部内容</button> 85 </body> 86 </html>