jquery方法

今日我们开始了jquery的课程，去年实习的时候我们接触过jquery但是当时根本不知道什么是这个，感觉让我们去实践跟我们一点关系没有没得东西我们都没有人在乎。只是模仿着做了一下当时布置的作业。这些天我们也开设而来jquery的课程，我们对jquery有了深入的了解，知道jquery的结构既简单的应用，下面的这个就是用jquery做的一个图书管理表。以下是jquery方法：

<script type="text/javascript">

        $(function() {

            $('#checkshow').click(function () {

                $('table:checkbox').attr('checked', this.checked);

            })

            $('#delete').click(function () {

                varck = $('#form1 :not(#checkshow)');

                ck.each(function (index) {

                    if(this.checked) {

                        $('table tr[id=' + this.value+ ']').remove();

                    }

                })

            })

            $('tabletr td image').mousemove(function (e) {

                $('#imgshow').attr('src', this.src).css({top: (e.pageY + 5), left: (e.pageX + 5) }).show();

            })

            $('tabletr td image').mouseout(function () {

                $('#imgshow').hide();

            })

        })

</script>

上面是方法，下面就是结构了，下面是我做的界面的结构，不好看，只是实现了一下功能。

<table>

        <tr>

          <td class="style1"></td>

          <td>图ª?书º¨¦</td>

          <td class="style2">封¤a面?</td>

          <td class="style3">作Á¡Â者?</td>

          <td>数ºy量¢?</td>

          <td>单Ì£¤价?</td>

         

        </tr>

        <tr id="0">

          <td class="style1"><inputtype="checkbox"id="Checkbox1"value="0"/></td>

          <td>语®?文?</td>

          <td class="style2" ><image src="images/林¢?黛¨¬玉®?.jpg" width="50px" height="50px"/></td>

          <td >张?三¨y</td>

          <td>20</td>

          <td>50</td>

        </tr>

        <tr id="1">

          <td class="style1"><inputtype="checkbox"id="Checkbox2"value="1"/></td>

          <td>数ºy学¡ì</td>

          <td class="style2" ><image src="images/林¢?志?玲¢¨¢.jpg" width="50px" height="50px"/></td>

          <td >李¤?四?</td>

          <td>30</td>

          <td>100</td>

        </tr>

        <tr id="2">

          <td class="style1"><inputtype="checkbox"id="Checkbox3"value="2"/></td>

          <td>英®¡é语®?</td>

          <td class="style2" ><image src="images/林¢?志?颖®¡À.jpg" width="50px" height="50px"/></td>

          <td >王ª?五?</td>

          <td>50</td>

          <td>200</td>

 

        </tr>

         <tr id="3">

          <td class="style1"><inputtype="checkbox"id="Checkbox4"value="3"/></td>

          <td>物?理¤¨ª</td>

          <td class="style2" ><image src="images/林¢?心?如¨?.jpg" width="50px" height="50px"/></td>

          <td >赵?六¢¨´</td>

          <td>20</td>

          <td>100</td>

          <td></td>

        </tr>

 

      </table>

    全¨?选?<input type="checkbox"id="checkshow"/>

    <input type="button" id="delete" value="删¦?除y" />

    <img class="imgclass" id="imgshow"/>

看完这个，在跟我们老师的做的相比较，感觉真有差距啊。我做的功能虽然实现了，但是代码量显而易见，但是再看看老师的只有短短几行代码。

下面是用jquery实现字体的转换的方法：

<script type="text/javascript">

        $(function() {

            $('#createnode').click(function () {

                varstr1 = $('#seelement').val();

                varstr2 = $('#txtcontent').val();

                varstr3 = $('#seattr').val();

                var str4= $('#txtvalue').val();

                varstr = '<' + str1 + ' ' + str3 + '=' + str4 + '>' + str2 + '</'+ str1 + '>'

                $('#div2').append(str);

            })

        })

这个方法不是非要用的我只是拿出来展示一下。开源嘛！

<script type="text/javascript">

        $(function() {

            $('select').change(function () {

                $('#divselect').text($(this).val().join(','));

            })

 

            $('#mytxt').focus(function () {

                $(this).val('');

            })

 

            $('#mytxt').change(function () {

                $('#divtxt').text($(this).val());

            })

        })

 

<script type="text/javascript">

        $(function() {

            vardhtml = $('#div1').html();

            vardtext=$('#')

        })

这两个方法是针对表格做的可以鉴赏一下。