jquery例子

1.调用dom对象跟jquery对象的差别

<body>
<input type="text" value="累成狗了知不知道" ID=“username” name="username" >
</body>

输出一个dom 对象:

<script type="text/javascript">
var shuchu=document.getElementById("username");获取ID给一个对象
alert(shuchu.value);//打印输出语句,dom对象(对象名直接取名字不加$区分,方便区分dom跟jquery对象)

</script>

输出一个jquery对象:

<script type="text/javascript">

var $jqy= $(shuchu)//dom对象转成jquery对象(jquery对象就是jquery用$()方法把dom对象封装起来,用$方便区分对象)
alert($jqy.val())//用val()方法调用对象$jqy里面value的值
</script>

2.怎么把dom对象变成jquery变成一个dom对象

方法一:把jquery当做一个数组来取值,让dom对象拿到文本的ID

<body>
<input type="text" value="用户名" id="username" name="usename">
</body>

<script type="text/javascript">
var user=$("#username")[0];//把jquery当做一个数组来取值dom对象,拿到ID,0是表示这里只有一个数值,可以定义多个
alert("user.value");

方法二:调用jquery的对象,获取封装的dom对象。在把jaquery对象里的值传到一个新的对象里。

<body>
<input type="text" value="用户名" id="username" name="usename">
</body>

<script type="text/javascript">

var $user=$("#username");//方法二,调用jquery的对象,获取封装的dom对象。
var user=$user.get(0);
alert(user.value);

 

3.jquery是javascript中比较常用的一种,可以用少量的代码达到更多的效果。那么dom跟jquery输出的值又有什么不同呢?

一下通过一个小例子来看一下:

3.1一下是一个dom对象输出的方法:

<body>
<input  type="text"  value="我是上文 ”  ID="text1"  name="test1">
<input  type="text"  value="我是下文 ”  ID="text2"  name="test2">
</body>
<script type="text/javascript">
var text=document.getElementById("text");
alert(text.value);
</script>

当它获取对象的ID出错写成text时,结果如下:

3.2一下是一个jquery对象输出的方法:

<body>
<input  type="text"  value="我是上文 "  ID="text1"  name="test1">
<input  type="text"  value="我是下文 "  ID="text2"  name="test2">
</body>
<script type="text/javascript">
//var text=document.getElementById("text1");
var $text=$("#text");
//alert(text.value);
alert($text.val());
</script>

这样写按理说应该输出一个提示框,不知道为什么没反应。

 

posted @ 2016-09-28 22:10  下一个秋天  阅读(352)  评论(0编辑  收藏  举报