3.JQuery

初了解jQuery,

JQuery核心方法：

                    Js,或控件句柄，读取修改控件属性，添加删除控件节点（控件）。

            JQuery中核心方法为jQuery()或$(),两者功能相同，有四种用法，如下：

查找元素（选择器）：

        在JavaScrpt编程中，查找出指定元素然后进行操作是很常见的编程模式，通过

DOM方法查找元素往往使用getElementById或getElementsByTagName,如果元素不

能根据id或标签名这样显著的特征查询（如查找所有的单选框），则更加麻烦。使用

jQuery可以根据表达式快速的查找到特定元素，语法如下：

        jQuery(表达式，[内容])或$(表达式，[内容])，返回JQuery对象。

JQuery代码                                               JavaScirpt代码

$('#id')                                                   getElementById('id')

$('DIV')                                                  getElementsByTagName('DIV');

$('#myDIv').attr("属性名称")  //获取属性

$("#myDiv").text()   //得到子文本节点内容

1.介绍

1.单击替换隐藏和显示div

<p>hello jquery</p>
<script type="text/javascript" src="javascript/external/jquery/jquery.js"></script>
<script type="text/javascript">// <![CDATA[
$(function () {
            //$(function () {
            //    alert('页面加载后执行');
            //})
            $('input').click(function () {
                //toggle:切换,转换键; 切换键; blind：隐藏，看不见地;
                $('#tesDiv').toggle('blind');
            })
        })
// ]]></script>
<p><input id="testButton" type="button" value="单击替换隐藏和显示div" /></p>
<div id="tesDiv" style="width: 80%; background-color: #ffdfff;">
<p>helle jquery</p>
<p>helle jquery</p>
<p>helle jquery</p>
<p>helle jquery</p>
</div>

运行效果：

2.单击：得到标签的长度即数量。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hello jquery</title>
    <script src="javascript/external/jquery/jquery.js"></script>
    <script>
        $(function () {
            $('#myButton2').click(function () {
            alert($("input").length);//input标签有几个
            });
        });
    </script>
</head>
<body>
    <input  type="button" value="单个元素" id="myButton"/>
    <input type="button" value="多个元素" id="myButton2" />
    <input type="button" value="多个元素" id="myButton2" />
    <input type="button" value="多个元素" id="myButton2" />   
</body>
</html>

结果是：4

选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hello jquery</title>
    <script src="javascript/external/jquery/jquery.js"></script>
    <script>
        $(function () {
            $('#myButton').click(function () {          
                alert($("input")[0].value);
                alert($("input")[1].value);
                alert($("input")[2].value);
            });
          
        });
    </script>
</head>
<body>
    <div id="dsdd" style="display:none" name="ds">ddd</div> 
    <input  type="button" value="单个元素" id="myButton"/>
    <input type="button" value="多个元素1" id="myButton2" />
    <input type="button" value="多个元素2" id="myButton1" />
    <input type="button" value="多个元素3" id="myButton3" />   
</body>
</html>

运行结果：

posted @ 2016-11-29 16:19  狼牙者.net  阅读(89)  评论(0)    收藏  举报