JQurey学习

Posted 2021-11-28 qqwhsj

JQurey是javascript的一个类库，简化了JavaScript编程（因为JavaScript真的手感很shit）

一、JQuery的功能

• html 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改

二、function

1.document方法的两种写法，该方法意义在于直接调用与JS中的onload类似

                $(document).ready(function(){
                    alert(1)
                });
                $(function(){
                    alert(1)
                });

onload与function的区别

 onload：后于function执行，且只能存在一个，多个存在时，后者会直接覆盖前者。

 function：可以存在多个，执行顺序按照代码顺序。

三、JQuery的选择器

   分类与CSS中类似

   id选择器：使用#+选择器名  $("#selector").function(){}

   类选择器：使用.+选择器名  $(".selector").function(){}

   属性选择器：使用[flied=value] $("[type="button"]").function(){}

   由于命名原因，详情见：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

四、JQuery对元素的操作

   text（）：获得选择元素的文本内容

   val（）：获得选择元素的value值

   html（）：获取选择元素内部的内容，以html方式呈现

   attr（）：获得选择元素的属性值（内涵属性名），设置选择元素的属性（内涵两个元素，前者为属性名，后者为属性值）

 五、JQuery的效果

   显示/隐藏：使用show()与hide()完成该操作，也可以使用toggle来完成（即两者结合的操作，当隐藏是会执行show，实现是会执行hide），可设置时间控制

   淡入淡出：使用fateIn()和fateOut()完成操作，也可使用fatetoggle完成，可设置时间

   滑入划出：使用slideDown()和slideUp()完成操作，可以使用slidetoggle完成，可设置时间

   保持透明度：fateTo(),状态与显示相同，可设置时间。

   滑动：animate（），内部｛｝设置滑动的方向，还可以设置width，height，以及opacity透明度等，不过需要有position属性（relation，fixed，absolute）。

   停止动画：stop方式停止动画

六、HTML操作

  添加：append，preend分别用于在文字属性开头与结尾添加； before和after分别用于在非文字前后添加。

  删除：remove，删除选定元素  empty，删除选定元素内部的子元素。

  添加删除CSS类：addClass：不过只能添加类选择器，removeClass：删除选择器 toggle：存在则添加，不存在则删除

  添加CSS属性：css（｛属性1：属性值1，属性2：属性值2｝）或则 css（属性名，属性值）

  宽高：width和height：不包括内边距，外边距    innerwidth和innerheight：不包括外边距  outerwidth和outerheight：包括内外边距