阿八博客

  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章，大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JQuery 入门学习(二)

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接：https://www.abboke.com/rz/2019/1010/116821.html

    时隔几天，天气依旧炎热，不过坐在空调房里的我一点也感觉不到~(笑)。我的事也在稳步进行着，这个下午继续我上一篇的Jquery。

    (文中代码大家依旧可以拿到 http://www.w3school.com.cn/tiy/t.asp?f=html_basic 上运行查看效果 )

    选择器详解和css语法

    上次简单地说了选择器，只提到了一个id选择器，选择id=xxx的某元素。其实Jquery的选择器可谓多种多样，对css比较熟悉的同学就很好学了，因为css的语法Jquery选择器基本都能用。

    比如，css里面，定义一个类的样式的方法：.XXX{}，而在Jquery里选择一个class=XXX的元素的方法：$(".XXX")。

    举一些常用的例子，详细的选择器说明在w3school里都有列出。

说明Jquery选择器选择的元素举例类似的css语法选择第一个id=xxx的元素$("#main")<div id="main"></div>#main { }选择所有class=xxx的元素$(".intro")<div>intro"></div>.intro {}选择所有X元素(X为标签名)$("h1")<h1></h1>h1 {}选择第一个某元素$("p:first") (第一个P元素)<p></p><p></p>p:first-child {}选择第n个某元素 (Jquery中从0开始，css中从1开始)$("p:eq(1)") (第二个p元素)<p></p><p></p> p:nth-child(2) {}选择tr元素下的第二个td元素$("tr td:eq(1)")<tr><td></td><td></td></tr>tr td:nth-child(2) {}选择所有带有某属性的元素$("[name='user']")<input name="user" />[name='user'] {}选择所有href="qq.com"的a元素$("a[href='qq.com']")<a href="qq.com"></a>a[href='qq.com'] {}选择所有type="hidden"的<input>元素$(":hidden")<input type="hidden" />input[type='hiden'] {}

    这只是我举的一些例子，基本上选择器Jquery和css类似，所以对css比较熟悉的人可以很快掌握Jquery的选择器语法，这也是Jquery流行的原因之一，很好学习，一通百通。

    事件详解

    在很多Jquery代码中，我们总是能看到是这样的形式：

brush: js;auto-links: false;">$(document).ready(function(){//Jquery代码});
    所有的代码被套在了最外层的ready中。我上次也提到了，ready是一个事件。我们上面说的选择器，它选择某元素的作用，其实就是为了完成后面的工作。看我们这个代码，$(document)选择的是document对象，这个对象学javascript应该很清楚，指的就是整个html文档。选在选在到了对象，这个对象有一个方法ready();


    ready是一个事件。事件是什么概念，和很多编程一样，事件是由用户在执行相应的操作后自动触发的一个过程，我们可以给某事件绑定一个处理函数，当用户触发了这个事件后，就能执行我们绑定的函数。

    ready()是一个事件绑定函数，它中间那个function(){}就是我们为ready事件绑定的函数。ready事件在对象加载完成后触发，我们前面选择的是document对象，所以这个ready就是指整个文档加载完成后触发的事件。

    所以整段代码意思就是为document对象的ready事件添加响应函数function(){}，这个函数里面添加我们希望Jquery做的事情。当文档加载完成后，执行此函数，相当于执行我们的代码。

    我列举一些Jquery中常用的事件及其绑定函数：

        click 鼠标点击事件 （最常用，当鼠标点击某对象时触发此函数）

        change 对象被改变（如input框中写入、修改、删除文字时触发此事件）

        focus 对象获得焦点（如光标进入textarea框触发此事件）

        blur 对象失去焦点（与focus事件相对）

        load 对象加载完成（如图像被加载完成时触发此事件）

        error 对象遇到错误 （如图像输入了一个错误的地址，没有成功加载）

        mousemove 鼠标移动 （当鼠标移动时触发此事件）

    上次我举了几个例子，有一个就是点击按钮后“离别歌”出现在页面中，触发的就是click事件。

    这次试试mousemove事件，运行这段代码：

brush: html;auto-links: false;"><html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $(document).mousemove(function(e){    $("span").text(e.pageX + ", " + e.pageY);  });});</script></head><body><p>鼠标位于坐标： <span></span>.</p></body></html>
    可以看到，鼠标移动后就能输出当前鼠标所在的坐标。其中function有一个参数e，每个事件函数都有一个参数，这个参数就是指该事件本身。（当然这个参数可以省略），e.pageX和e.pageY就是指鼠标以后后鼠标所在的位置。


    html操作详解

    选择器的作用我说了，就是完成为了后面的操作。除了为选择到的对象添加一个事件响应函数外，还能直接操作此对象，这就是我们的html操作。

    我也列举一些常用的html操作方法（更详细地在w3school中查看）

方法举例例子说明html()var txt = $("div#main").html();id=main的div元素，获取其中内容赋值给txtappend()$("div#main").append('<br/>leavesongs.com');向id=main的div元素中追加内容'<br/>leavesongs.com'prepend()$("div#main").prepend('leavesongs.com<br/>');向id=main的div元素中，在最前端增加内容
attr()$("table").attr("width","500");将所有table元素的属性设置为宽度等于500pxval()var pass = $(":password").val();获得密码框中的值(val()方法一般作为获取input框中内容的方法)hide()$("div#main").hide('slow'); 缓慢隐藏id=main的div元素show()$("div#main").show(2000);
用2000毫秒的时间显示id=main的div元素remove()$("div#main").remove();
移除id=main的div元素

    通过这些方法，我们能动态地对html页面进行操作。再结合之后我要说的ajax，就可以动态地向服务器请求内容，并在不刷新页面的情况下更新页面中一部分。

相关文章