Web页面设计实训课堂笔记06DYL

JQuery学习

1.jQuery事件及练习

<1>jQuery选择器简单说明

• $（“title”）选取所有id="title"的元素；
• $（“.white”）选取所有class=“white”的元素；
• $（“p.intro”）选取所有“class="intro"的

  元素；

• $（“p#demo”）选取所有id="demo"的

  元素；

• $（“.white:first”）选取所有class="white"的元素中的第一个元素。

注：

//通过“【】”大括号，可以在里面添加多个属性和值，属性和值都要用括号括起来，用冒号分隔开 eg：‘属性’：‘值’
//多个属性用逗号隔开eg：{‘属性’：‘值’,‘属性’：‘值’，}

<2>jQuery所涉及的ready事件（代码）

$(document).ready(function(){
//执行的代码});

内置函数

$("button").click(function(){
alert("你单击了按钮"):
});

<3>jQuery练习--实现按钮变化

总体代码：

    
    
    
    



    

        
首页
        
课程内容
        
上课地点
    
    


 

代码实现

<4>jQuery获取元素的内容和属性（DOM-文档对象模型操作）

• 获取内容：text（），html（），val（）.

text():设置或返回元素的文本内容

我叫张三

html():设置或返回所有元素的内容

我叫张三
123
&&&&&&&&&&&&&&




$("#test").text()结果为：

   div的内容和为：我叫张三
   123
   aaaaaaaaaaaaaaaaaaaaa

$("#test").html()结果为：

   html的内容和为：我叫张三
   
123
   
aaaaaaaaaaaaaaaaaaa

val():设置或返回表单字段的值

总结：text()和val()的区别 val()只能获取input标签里面的值。text()不能获取标签里面的值，因为是单标签。