一个轻量级的javascript库 pj介绍_lib_js_脚本之家

打包下载地址 //www.jb51.net/jiaoben/33561.html

添加页面载入函数

页面载入函数就是对window.load事件注册事件的一个代替,使程序员编写代码更加简单,不用绑定页面载入方法,我们可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

<script type="text/javascript">
    $(document).ready(function(){
        alert("hello world");
     });
</script>

此时在该页面载入的时候,就会首先alert一个”hello world”出来。。

相对于其他语言来说,javascript脚本语言太小巧玲珑了,活泼灵动。个人非常喜欢写javascript代码。虽说网络上出名的javascript库充斥网络,jQuery、Prototype、Base、ExtJs……,功能也非常强大,使用起来也方便。但是有一个不太令人满意的地方,就是库本身太大了。有时只是用其中几个功能就必须得把整个库引进来,就jQuery来说,压缩了也还有70多KB,有时比一个网页文件还大。但我们有需要一个库来协助开发,所以自己就写了一个轻量级的javascript库,只支持一些简单的选择器,其中很多选择器,方法借鉴了jQuery,命名为pj.下载源代码
这里只简单介绍一下 选择器: pj;//id选择器, 如: pj,取id为header的元素
pj;//标签 选择器, 如: pj,取页面所有的div pj;//class选择器, 如: pj,
取class为ClassName的[tag]元素 pj;//取指定id下的所有指定元素;如: pj,
取id为header元素下的所有a元素[包括子孙元素]
pj;//取指定标签下面所有指定标签的元素;如: pj
取页面所有li元素下面的a元素[包括子孙元素]
pj(“tag[,#id,tag.class][attr=value]:0,2”);//根据指定的属性或者下标取元素;如:
pj(“div[name=value]:0,3”)
取页面中含有name属性并且值为value的第一和第四个元素 pj;//生成一个div
pj;//生成一个带有内容的div 静态属性和方法 LEFT_POSITION
RIGHT_POSITION TOP_POSITION BOTTOM_POSITION LEFT_TOP_POSITION
LEFT_BOTTOM_POSITION RIGHT_TOP_POSITION RIGHT_BOTTOM_POSITION
ready; extend; bind{}}) isObject isFunction isString merge getStyle
setStyle mouseY stopDefault pageWidth windowWidth() setOpacity
enableDrag parseToQueryString isContain tag resetCSS y wh
pj对象属性和方法 timer length get addListener stop addClass setClass
setLocationRelatedTo locate setStyle change error keypress unload
mousemove mouseover resize left bottom animate slideUp slideLeft
scrollUp scrollLeft fadeIn 小演示 复制代码 代码如下:

parent > child

匹配给定的父元素的所有子元素

使用: $("form > input") 匹配结果: []

无标题文档

selector1,selector2,selectorN选择器

这个选择器是可以添加多个过滤条件,这些条件过滤后的结果叠加以后返回。

div

p class="myClass"

span

p class="notMyClass"

使用: $("div,span,p.myClass") 匹配结果:

div

p class="myClass"

span

这里多个条件之间使用”,”分割,这里选择div标签,span标签,和class=”myClass”的标签。

首先需要下载jquery

这里有压缩的,也有没有压缩的,其实两个文件内容都是一样的,区别就是压缩过的对于程序猿来讲,很难读懂,因为去掉了很多空格,代码很紧凑,文件也比较小,这里我下载的是没有压缩的。

ancestor descendant选择器

这个选择器是选择给定的祖先元素下的所有匹配的子元素。

找到form表单中的所有input元素 $("form input") 匹配结果: [ , ]

:first ,:last ,:even ,:odd选择器

:first,获取第一个元素。
:last 获取最后一个元素。
:even 匹配索引数是偶数的元素,索引从0开始
www.hj8828.com,:odd 匹配索引数是奇数的元素,索引从0开始

  • first
  • second
  • third
  • fourth
  • fifth

使用: $("li:first") 结果: [

  • first
  • ] $("li:last") 结果: [

    • fifth
    • ] $("li:even") [

      • first
      • ,

        • third
        • ,

          • fifth
          • ]

            ### :header选择器

            匹配如:h1,h2,h3这样的标题元素

            ### :focus

            匹配当前获取获取焦点的元素

            ### :contains(text)

            :contains(text)匹配包含指定text的元素

            John Resig

            George Martin

            Malcom John Sinclair

            $("div:contains('John')") 匹配结果: [

            John Resig

            ,

            Malcom John Sinclair

            ]

            ### :hidden

            匹配所有隐藏的元素

            ### :visible

            :visible匹配所有可见的元素

            ### 属性选择器

            #### [attribute]

            [attribute]匹配包含给定属性的元素

            Hello!

             

            $("div[id]") 匹配结果: [

             

            ]

            [attribute=value]
            匹配给定的属性是某个特定值的元素
            [attribute!=value]
            匹配所有不含有指定的属性,或者属性不等于特定值的元素
            [attribute^=value]
            匹配给定的属性是以某些值开始的元素

                    $("input[name^='news']")
                    结果:
                    [ ,  ]

                \[attribute$=value\]  
                匹配给定的属性是以某些值结尾的元素

                ### \[selector1\]\[selector2\]\[selectorN\]

                复合选择器,需要满足所有的条件





                    $("input[id][name$='man']")
                    结果:
                    [  ]

                ### 表单选择器

                :button  
                匹配所有按钮  
                :checkbox  
                匹配所有复选框  
                :password  
                匹配所有密码框  
                :text  
                匹配所有的单行文本框  
                :input  
                匹配所有 input, textarea, select 和 button 元素  
                :radio  
                匹配所有单选按钮  
                :submit  
                匹配所有提交按钮  
                :image  
                匹配所有图像域  
                :file  
                匹配所有文件域  
                :enabled  
                匹配所有可用元素  
                :checked  
                匹配所有选中的被选中元素  
                :selected  
                匹配所有选中的option元素

                以上就是jquery中常见的选择器,可以看到jquery我前端开发人员提供了丰富的选择器,比原始的JavaScript操作dom更加的方便。

)
下面的一段时间将会一步一步学习jquery,其实一直想写一系列关于jquery学习的记录,万事开头难,这次需要坚持。
jquer…

element选择器

element选择器是根据给定的元素来进行选择的。比如有如下html内容:

this is first id

this is second id

this is p

使用 $("div") 匹配结果:

this is first id

this is second id

*选择器

使用*号选择器,可以选择body标签中的每一个元素。

this is first id

this is second id

this is first class

this is p

使用: $("*") 匹配结果:

this is first id

this is second id

this is first class

this is p