JQuery框架

2019-04-11  本文已影响0人  AAnna珠

JQuery

jquery中文手册链接地址：http://jquery.cuishifeng.cn/

一、什么是JQuery
  1. jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
  2. jQuery库包含以下功能：
    HTML 元素选取
    HTML 元素操作
    CSS 操作
    HTML 事件函数
    JavaScript 特效和动画
    HTML DOM 遍历和修改
    AJAX
    Utilities
    3.语法：
    3.1基础语法： $(selector).action()
    美元符号定义 jQuery
    选择符（selector）"查询"和"查找" HTML 元素
    jQuery 的 action() 执行对元素的操作
    jq.png
    格式：
<script type="text/javascript">
            $(function(){
//JQuery  代码，页面加载之后，自动执行的代码
        })

4.事件


微信截图_20190411095153.png

格式：

<script type="text/javascript">
    $(function(){
              $("#aaa").mouseover(function(){
                    alert("hello");
        })
    })
    </script>
    <body>
        <span id="aaa">你好</span>
        <span>hello</span>
    </body>

this用法：this正在发生事件的该控件

this.png
二、步骤

1.引入jquery.js的方式本地或者CDN引入
2.书写思路：①找到控件
②添加事件
③填写执行代码

三、基础

1.JQuery语法：$（document）.ready()
2.常用语法：

var li = document.getElementsByTagName("li")；  //获取所有li元素
var $li = $( li[0]);     //把第一个li元素（下标为0）封装为一个jquery对象
alert( $li .html());    //调用jq对象的方法

3.2jquery转Dom
例：

var $li = $("li");   //返回jq对象
var li = $li [0];         //通过[index]或者get(index)返回dom对象
 /*或者var li = li .get (0) */    
alert(li .innerHTML);
四、选择器

1.选择器范例

<script type="text/javascript">
    $(function(){
        $("h3").css("background","orange");
        
    });
    </script>
    
    <body>
        <h3>hello</h3>
        <p>adada</p>
    </body>

2.jq选择器分类：
2.1类css选择器

2.1.1.1标签选择器
例：("h2" )选取所有h2元素* 2.1.1.2类选择器 *例：(" .title")选取所有class为title的元素
2.1.1.3ID选择器
例：(" #title")选取id为title的元素* 2.1.1.4并集选择器 *例：("div,p,.title" )选取所有div、p和拥有class为title的元素
2.1.1.5交集选择器
例：("h2.title")选取所有拥有class为title的h2元素* 2.1.1.6全局选择器 *例：("" )选取所有元素*
2.1.2.1后代选择器
例：("#menu span" )选取#menu下的<span>元素* 2.1.2.2子选择器 *例：(" #menu>span" )选取#menu的子元素<span>
2.1.2.3相邻元素选择器
例：(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>* 2.1.2.4同辈元素选择器 *例：(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>
2.1.3属性选择器：

2.2.3内容过滤选择器:

2.2.4表单选择器:

拓展：prop() 方法设置或返回被选元素的属性和值。
设置属性和值：$(selector).prop(property,value);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <title></title>
        <style>
            
        </style>
    </head>
    <script type="text/javascript">
    $(function(){
        $(":checkbox").click(function(){
            if($(":checkbox").prop("checked")){
                $(":submit").prop("disabled",false);
            }else{
                $(":submit").prop("disabled",true);
            }
        })
        
    });
    </script>
    
    <body>
        <form>
        <input type="checkbox" />协议<br />
        <input type="submit"  disabled="disabled"/>
        </form>
    </body>
    
</html>
五、事件

1.jQuery事件是对JavaScript事件的封装
2.1常用事件分类如下：
①基础事件
②鼠标事件
③键盘事件
④表单事件
⑤window事件
2.2复合事件是多个事件的组合
鼠标光标悬停
鼠标连续点击

3.1鼠标事件：①click( )单击鼠标时②mouseover( )鼠标移过时③mouseout( )
鼠标移出时④hover()悬停
3.2键盘事件：①keydown( )按下键盘时②keyup( )释放按键时
③keypress( )产生可打印的字符时
3.3表单事件：focus ()获得焦点时blur失去焦点
3.4文档/窗口事件： load()已废弃，resize()调整浏览器窗口大小
4.1绑定事件：
on(event,[selector],[data],fn)
[event]事件类型
[selector]选择器
[data]数据
[fn]处理函数
4.2移除事件：
off([type],[selector],[fn])
[type]事件类型
[selector]选择器
[fn]处理函数

六、Dom操作

1.元素内容操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <title></title>
    </head>
    <script type="text/javascript">
        $(function(){
            $("#a").click(function(){
                $("table").append("<tr><td>cc</td><td>cc</td></tr>")
            })
            
        });
    </script>
    <body>
        <div id="a">新增</div>
        <table>
            <tr>
                <td>aa</td>
                <td>aa</td>
            </tr>
            <tr>
                <td>bb</td>
                <td>bb</td>
            </tr>
        </table>
    </body>
</html>

2.3插入同辈节点：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父元素)   
    <p>p (父元素)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title></title>
    </head>
    <style>
    .hover{
        background-color: #e0e0e0;
    }       
    </style>
    <script type="text/javascript">
        $(function(){
            
            $("#b").children().click(function(){
                var b = $(this).text();

                $("#b").children().each(function(){
                    $(this).text(b);
                });
            })
        });
    </script>
    <body>
    <div id="a">新增</div>
    <ul id="b">
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title></title>
    </head>
    <style>
    .hover{
        background-color: #e0e0e0;
    }       
    </style>
    <script type="text/javascript">
        $(function(){
            var ss = ["黑龙江省","吉林省","辽宁省"];
            var cc = [
            ["黑龙江省","哈尔滨","大庆","齐齐哈尔"],
            ["吉林省","长春","吉林","四平"],
            ["辽宁省","沈阳","大连","鞍山"]];
            for(var i=0;i<ss.length;i++){
                $("#s").append("<option>"+ss[i]+"</option>");
            }
            
            $("#s").change(function(){
                for(var i=0;i<cc.length;i++){
                    if(cc[i][0] == $("#s").val()){
                        $("#c").empty();
                        for(var j=1;j<cc[i].length;j++){                
                            $("#c").append("<option>"+cc[i][j]+"</option>")
                        }           
                    }
                }
            })

        });
    </script>
    <body>
    <div id="a">新增</div>
    <select id="s"></select>
    <select id="c"></select>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读