jQuery 选择器事件

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_30338743

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ChenMM/p/9480305.html

版权

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>

转载于:https://www.cnblogs.com/ChenMM/p/9480305.html

weixin_30338743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 选择器事件

1. 在页面中选取所有<p>元素并隐藏所有<p>元素1 $('p').click(function(){2 $(this).hide();3 });2.id选择器，通过id选择指定的元素$('#a').click(function(){ ...
复制链接

扫一扫