JQuery 学习一

 

JQuery 学习一
1.什么是JQery,有什么好处
  JQuery是一个JavaScript框架或脚本库。它将一些原始js脚本封装,
  提供了一些函数,便于脚本开发.
  类似JQuery框架很多,例如prototype,ExtJs,yahoo
  好处:应用方便,便于客户端JavaScript和Ajax编程.
  
2.JQuery框架原理
  JQuery提供了很多功能函数和多种类型选择器
  1)使用JQuery编程步骤
    a.先利用选择器就爱那个页面中的元素获取
    b.然后使用函数进行操作
  2)什么是JQuery对象
    利用JQuery选择器选出的对象
  3)对象类型的转换
    a.将一个DOM对象转换成JQuery对象
      $(DOM对象)
    b.将一个JQuery对象转换成DOM对象
      //获取对象集合中的第一个DOM对象
      JQuery对象[0]或者JQuery对象.get(0)
    c.将字符串转换成JQuery对象
      $(字符串)
  4) 在页面载入完成执行

 

 $(document).ready(function() {
           //利用html()函数获取innerHTML
          alert($( "#a1").html());
     });
     //上面的简写
     $(function() {
          alert($( "#a1").html());
     });

 3.JQuery选择器

 

  1)基本选择器
     a.按id属性值选择
       $("#id值")
 $("#a1")
     b.按class属性值选择
       $(".class值")
$("#d1").css( "font-size","50px" );//第一行字体变成50px
$( ".d").css("font-size" ,"50px" );//将class=d的元素字体变成50px
$( "div").css("font-size" ,"50px" );//所有div
$( "#d1,span").css("font-size" ,"50px" );
     c.按元素名称选择
       $("元素名称")
$(span);
     d.选取所有元素
$(*)
     e.选取多个元素
$("#c1,#c2")
$("#d1,span")
    2)层级选择器
HTML 代码:

 

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
    a.父子关系,在给定的父元素下匹配所有的子元素

 

          $("选择器1 > 选择器2")
jQuery 代码:
$("form > input")
结果:
<input name="name" />
    b.祖先后代关系,在给定的祖先元素下匹配所有的后代元素 
          $("选择器1 选择器2")
jQuery 代码:

 

$("form input")

 

结果:
<input name="name" />, <input name="newsletter" />
  c.前后关系,匹配所有紧接在 prev 元素后的 next 元素

 

          $("prev + next");
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
   d.兄弟关系,匹配 prev 元素之后的所有 siblings 元素
       $("pre ~ sibling")
jQuery 代码:

 

$("form ~ input")
 

 

结果:

 

<input name="none" />

 

 

 

 3)简单选择器
     a.选第一个 :first
     b.选最后一个  :last
     c.选奇数元素  :even
     d.选偶数元素  :odd
     e.选指定元素  :eq(索引)
     f.选大于指定元素  :gt(索引)

 

 

 

<html>
     <head >
           <script type= "text/javascript" src="jquery-1.8.1.js" ></script>
           <script type= "text/javascript">
     $(function() {
           //父子关系选择器
          $( "#u2 > li").css("font-size" , "50px" );
           //祖先后代选择器
          $( "#u2 li").css("font-size" , "50px" );
          $( "div>#u2").css("font-size" , "50px" );
           //选择第一个li元素
          $( "#u1>li:first").css("background-color" , "#888");
          $( "#u1>li:last").css("background-color" , "blue");
          $( "#u1>li:even").css("background-color" , "#888");
          $( "#u1>li:odd").css("background-color" , "#555" );
          $( "#u2>li:eq(1)").css("background-color" , "#555");
          $( "#u2>li:gt(2)").css("background-color" , "#555");
     });
</script>
     </head >
     <body >
           <div>
               <h2> 体育新闻</h2 >
               <ul id= "u1">
                    <li> 标题1</li >
                    <li> 标题2</li >
                    <li> 标题3</li >
                    <li> 标题4</li >
                    <li> 标题5</li >
               </ul>
           </div>
           <div>
               <h2> 社会新闻</h2 >
               <ul id= "u2">
                    <li> 标题1</li >
                    <li> 标题2</li >
                    <li> 标题3</li >
                    <li> 标题4</li >
                    <li> 标题5</li >
               </ul>
           </div>
     </body >
</html>
   4)内容选择器
     a.根据指定文本信息选择
       $("div:contains('jack')")
     <div>jack123</div>
     b.匹配没有子元素或者文本为空的元素
       $("div:empty")
       <div></div>
       <div/>
  5)可见性选择器
     a.选择不可见元素
       $("div:hidden")
     b.选择可见元素
       $("div:visible")
  6)属性选择器
     a.按属性值做选择条件
       [属性名=属性值]
       $("input=[name='newsletter']")
  7)表单选择器
     a.选择所有表单元素,例如text,textarea,select
       :input
     b.选择type="text"类型的输入框
       :text
     c.选择type="checkbox"类型元素
       :checkbox
     d.其他:password,:hidden,:radio,:button,:image,:file
  8)表单对象属性选择器
     a.选择可用表单元素
       :enabled
     b.选择所有不可用元素
       :disable
     c.选择所有选中的元素
       :checked
     d.选择被选中的select的option
       :selected

4.属性和样式函数
  1)属性函数
      a.属性操作
     attr(属性) 返回属性值
     attr(属性名,属性值) 设置属性值

      b.value属性操作
     val() 返回value属性值
     val(值) 设置value值
     
      c.获取文本信息,纯文本
     div或span等元素的文本信息
     text() 返回元素中的文本内容
     text(值) 设置元素中的文本内容
     
      d.获取和设置div等元素的信息,html信息处理
     html();
     html(值);
     
      e.class属性操作
     addClass(值)  设置元素class="值"
     removeClass(值)  删除class属性中的值

   2)css样式函数
     a.css样式控制
       css(样式属性);  获取样式属性的值
       css(样式属性,值);  设置样式属性值
     b.宽和高的设置
       width();  获取元素的宽度
       width(值);  设置元素的宽度
       height();  获取元素的高度
       height(值);  设置元素的高度

5.事件函数
  1)页面载入
     $(document).ready(fn)
     或$(fn)或$().ready(fn)
  2)基本事件
     click()  触发单击事件,执行单击事件
     click(fn);  为元素绑定一个单击处理fn
     focus();  
     focus(fn);
     blur();  失去焦点
     blur(fn);  
     change();
     change(fn);
     unload(fn);  设置浏览器卸载页面前执行
     mouseover();  鼠标移上去
     mouseover(fn);
     mouseout();  鼠标移开
     mouseout(fn);
     keyup(); 键盘按下
     keyup(fn);
    
  3)事件切换
     hover(over,out);  模仿悬停事件
     toggle(f1,f1,...); 每次点击后依次调用函数

  4)事件处理函数
     a.bind("事件类型",fn);
       为元素绑定指定类型的事件处理函数
       $("#btn1").click(fn);
       $("#btn1").bind("click",fn);
     b.unbind("事件类型")
       为元素取消绑定的处理函数
       $("#btn1").unbind("click");//取消click事件
       $("#btn1").unbind();//取消所以事件
     c.trigger("事件类型")
       触发元素绑定的事件处理
       $("#btn1").click();
       $("#btn1").trigger("click");
     d.live("事件类型",fn)
       为现有和将来动态添加的元素绑定指定类型事件

6.文档处理
  1)创建文档对象
     $("字符串")
  2)将文档对象添加到页面
     append(对象);  将对象值插入到元素内部末尾出
     prepend(对象);  将对象值插入到元素内部的前面
     after(对象);  在对象值插入到元素后面
     before(对象);  在对象值插入到元素前面
  3)删除文档元素
     empty();  将元素内容清空
     remove();  将元素删除
  4)将文档元素复制
     clone();  复制元素
     clone(true);  深度复制
  5)将文档元素用新元素包裹起来
     wrap(html) 利用指定的html元素将指定的元素包裹起来
     $("p").wrap("<div></div>");
     用div把p包裹起来
  6)将文档元素替换
     replaceWith(html);  利用html元素替换原有内容

 

你可能感兴趣的:(jquery)