第二十五弹-jquery基础

作者: 我是小韩 | 来源:发表于2016-07-06 16:48 被阅读0次

1.说说库和框架的区别？

库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数并具有一定的模式兼容性。例如jquery
框架的相对于库更重量级一些，倾向于提供整套的解决方案，倾向于创造一些需要你来遵守的规则和范例。例如angular.js

2.jquery 能做什么？

jQuery 库包含以下特性：

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

HTML 元素选取跟document.querySelectorAll()用法很相似


$("a")  返回所有的a元素
$(".category")返回所有的含有category类的元素
$("#header") 返回id为header的元素
$("ul li")  返回ul中的所有li
$("ul").find("li")   =$("ul li")
$("ul li").eq(0) 返回ul中的第一个li元素

HTML 元素操作
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值
attr() 设置或返回元素的属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>class25</title>
    <style>
    a.btn{
      display: inline-block;
      margin: 0 10px;
      padding: 5px;
      text-decoration: none;
      color: black;
      border: 1px solid #ccc;
      border-radius: 3px;

    }
    </style>
  </head>
  <body>
    <ul class="pannel">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <a href="" class="btn">点我</a>
    <form action="#">
      <ul>
        <li>用户名</li>
        <li><input type="text" name="name"></li>
      </ul>
    </form>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <script>
    $(".pannel li").text() //123
    $(".pannel li").html()  //1
    $(".pannel li").text("123")  //[<li>123</li>,<li>123</li>,<li>123</li>]
    $(".pannel li").html("<a href=''>这是一个链接</a>")
    $("a").attr("class") //btn
    $("a").attr("class",$("a").attr("class")+" hehe")   //class="btn hehe"
    $("input").val("xiaohan")  //设置input元素值
    $("input").val()             //获取input元素值
</script>
  </body>
</html>

CSS 操作

$("a").css("background-color","#ccc")  //直接给元素设置样式
//添加和移除CSS
$("a").removeClass("btn")
$("a").removeClass()
$("a").addClass("btn")

3.jquery 对象和 DOM 原生对象有什么区别？如何转化？

DOM元素是用原生js获取的，jquery元素是利用jquery选择器获取的
jquery ->DOM ：jquery [0]和jquery.get(0);
DOM->jquery :$(DOM)

4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

事件的绑定：
第一种方法：直接使用关键字绑定 $(...).click(handler(e))、$(...).keydown(handler(e)) 等

click 鼠标单击
dbclick 鼠标双击
** keydown** 键盘按下
** keypress** keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件
** keyup** 键盘弹起
** mouseover ** 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。与mouseout合用
** mouseenter ** 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。与mouseleave合用
** mouseout ** 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
** mouseleave** 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
** change** 当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
** scroll ** 当用户滚动指定的元素时，会发生 scroll 事件
** focus** 当元素获得焦点时，发生 focus 事件

** blur ** 当元素失去焦点时，发生 focus 事件
** resize ** $("window").resize(function(e){}) 当浏览器窗口大小改变时触发
** hover ** 跟CSS中的hover一样只不过触发函数要写两个

mouseover和mouseenter 的区别

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    .div{
      width: 500px;
      margin-bottom: 20px;
      padding: 1px;
      background-color: #ccc;
      vertical-align: middle;
      text-align: center;
    }
    .div h2{
      background-color: white;
      display: inline-block;
    }
  </style>
  <body>
      <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
      <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
      <div class="div over">
        <h2>被触发的 Mouseover 事件<span></span></h2>
      </div>
      <div class="div enter">
        <h2>被触发的 Mouseenter 事件<span></span></h2>
      </div>
      <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        var x=0;
        var y=0;
        $(".over").mouseover(function(e){
          $(this).find("span").text(++x);
        });
        $(".enter").mouseenter(function(e){
          $(this).find("span").text(++y);
        });
      });

      </script>
  </body>
</html>

Paste_Image.png

mouseout 和mouseleave的区别

      <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
      <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
      <div class="div over">
        <h2>被触发的 Mouseout次数 <span></span></h2>
      </div>
      <div class="div enter">
        <h2>被触发的 Mouseleave次数<span></span></h2>
      </div>
      <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        var x=0;
        var y=0;
        $(".over").mouseout(function(e){
          $(this).find("span").text(++x);
        });
        $(".enter").mouseleave(function(e){
          $(this).find("span").text(++y);
        });
      });

Paste_Image.png

hover 的用法

$('.btn').hover(function () { $(this).addClass('hover');}, function () { $(this).removeClass('hover');});

第二种方法：使用绑定事件函数
$(...).on( eventType,handler(e));

bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

bind( events,handler(e)) 为元素逐一绑定事件处理函数
unbind( events) 为元素解绑事件函数
delegate( selector, events, handler(e) ) 事件代理，当元素下面的selector元素触发事件执行
.undelegate( selector, events) 解绑事件代理
live( events,handler(e)) 事件代理，当事件冒泡到document元素时执行，
on(events,handler(e)) 为元素逐一绑定事件处理函数
on(events,selector,handler(e)) 事件代理当元素下面的selector元素触发事件执行
另外值得一提的是所有的事件绑定函数在1.4版本以后都支持传入多个event
推荐使用on函数
on既可以为元素逐一绑定事件，又可以使用事件代理
live函数在1.7版本以前就过时了（但百度提供的在1.9才不能使用，可能是做了兼容），效率又不高。
delegate函数也逐渐使用 on函数来替代，现在仍然可以用，但不推荐

5.jquery 如何展示/隐藏元素？

hide(speed,callback); //显示
show(speed,callback); //隐藏
toggle(speed,callback); //切换
其中speed 代表执行时间，可以是 slow fast normal 三个字符串也可以是毫秒值
callback是完成后的调用函数

  <style>
    .box{
      float: left;
      background-color: #ccc;
      margin-right: 10px;
      padding: 0 5px;
      display: none;
    }
  </style>
  <body>
      <button id="show">show</button>
      <button id="hide">hide</button>
      <button id="toggle">toggle</button>
     <div class="box">hello</div>
     <div class="box">world!</div>
     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        $("#show").on("click",function (){
          $(".box").first().show("fast",function showNext(){
            $(this).next(".box").show("fast",showNext);

          });
        });
        $("#hide").on("click",function(){
          $(".box").last().hide("fast",function hideNext(){
            $(this).prev(".box").hide("fast",hideNext);

          })
        });
        $("#toggle").on("click",function(){
          $(".box").toggle("slow");
        })
      })
      </script>

Paste_Image.png

6.jquery 动画如何使用？

animate({params},speed,callback);
params 代表css属性集合
speed 代表动画执行时间，可以是slow fast normal 三个字符串也可以是毫秒值
callback 是回调函数

      <script type="text/javascript">
      $(function(){

        $("#animate").on("click",function(){
          $(".box").animate(
            {
              "margin-left":"100px",
              width: "200px",
              height: "200px",
            },"fast",function(){
              $(".box").animate(
                {
                  "margin-left" :"10px",
                  width: "100px",
                  height: "100px"
                },"fast"
              );
            });
        })
      })
      </script>

Paste_Image.png

7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

text() 设置或返回所选元素的文本内容,设置文本传入字符串参数
html() 设置或返回所选元素的内容（包括 HTML 标记）设置html传入字符串参数

8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

获取表单输入的内容
$("#name").val();
获取表单选择的内容

    <select class="" name="year">
        <option value="2015">2015年</option>
        <option value="2016">2016年</option>
      </select>
$("select option:selected").text()  //2015年 获取选中文本
$("select").val()             //2015 获取选中的值

设置和获取元素属性
$(selector).css("background-color"); //获取样式
$(selector).css("background-color","#ccc") //设置样式
$("input").attr("placeholder","hello") //设置属性
$("input").attr("placeholder") //获取属性

代码题：
代码

本教程版权归小韩同学和饥人谷所有，转载须说明来源

参考文档：
饥人谷课件-jquery基础
 饥人谷课件-jquery基础2
事件绑定：参考自jquery中文API
常用的事件：参考自w3c事件

网友评论

本文标题：第二十五弹-jquery基础

本文链接：https://www.haomeiwen.com/subject/lmnhjttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

第二十五弹-jquery基础

1.说说库和框架的区别？

2.jquery 能做什么？

3.jquery 对象和 DOM 原生对象有什么区别？如何转化？

4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

5.jquery 如何展示/隐藏元素？

6.jquery 动画如何使用？

7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读