JQuery框架

作者: AAnna珠 | 来源:发表于2019-04-11 09:43 被阅读0次

JQuery

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

一、什么是JQuery

jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
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.常用语法：

css("属性","属性值") 为元素设置CSS样式的值
addClass() 为元素添加类样式
next() 获得元素其后紧邻的同辈元素
html() 取得第一个匹配元素的html内容
3.Dom对象和JQuery对象的区别：
Dom对象是单独一个，直接使用js获取对象节点，只能使用dom的属性和方法， document.getElement***系列的方法返回的就是dom对象；
JQuery对象是数组，可以通过数组下标index的方法得到相应的对象，使用$()方法返回对象都是jquery对象。
3.1Dom转jquery
例：

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选择器

基本选择器：标签选择器、类选择器、ID选择器、并集选择器、交集选择器、全局选择器。
层次选择器：后代选择器、子选择器、相邻元素选择器、同辈元素选择器。
属性选择器

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属性选择器：

[attribute]：例：$(" [href]" )选取含有href属性的元素
[attribute=value]：例：$(" [href ='#']" )选取href属性值为“#”的元素
[attribute !=value]
[attribute^=value]：例：$(" [href^='en']" )选取href属性值以en开头的元素
[attribute $=value]：例：$ (" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute=value]：例：$(" [href ='txt']" )选取href属性值中含有txt的元素
[selector] [selector2] [selectorN]：例：$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素
2.2过滤选择器
基本过滤选择器
可见性过滤选择器
内容过滤选择器
子元素过滤选择器
表单选择器
表单对象属性过滤选择器
语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
2.2.1基本过滤选择器：
$(" li:first" )选取所有<li>元素中的第一个<li>元素
$(" li:first" )选取所有<li>元素中的第一个<li>元素
$(" li:even" )选取索引是偶数的所有<li>元素
$(" li:odd" )选取索引是奇数的所有<li>元素
$("li:eq(1)" )选取索引等于1的<li>元素\
$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
$(" li:not(.three)" )选取class不是three的元素
$(":header" )选取网页中所有标题元素
$(":focus" )选取当前获取焦点的元素
2.2.2可见性过滤选择器:
$(":visible" )选取所有可见的元素
$(":hidden" ) 选取所有隐藏的元素

2.2.3内容过滤选择器:

$("div:contains("abc.com" )选取含有abc.com文本的div元素
$("div:empty" )选取不包含子元素或者文本的空div元素
$("ul:has(.red)" ) 选取含有class是red的ul元素
$("div:parent" )选取含有子元素或者文本的div元素

2.2.4表单选择器:

$("#myform :input")选取表单中所有的input、select和button元素
$("#myform :text")选取email 和姓名两个input 元素
$("#myform :password" )选取所有<input type="password" />元素
$("#myform :radio")选取<input type="radio" />元素
$(" #myform :checkbox " )选取<input type="checkbox " />元素
$("#myform :submit " )选取<input type="submit " />元素
$("#myform :image" )选取<input type=" image" />元素
$(" #myform :reset " )选取<input type=" reset " />元素
$("#myform :button" )选取button 元素
$(" #myform :file" )选取<input type=" file " />元素
$("#myform :hidden" )选取<input type="hidden " />、style="display: none"等元素
表单对象属性过滤选择器
$("input:enabled")选取所有可用的input元素
$("input:disabled")选取所有不可用的input元素
$("input:checked")选取所有选中的复选框元素
$("select option:selected")选取所有选中的选项元素

拓展：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.元素内容操作

html（）取得的内容是html的内容。
text（）取得的是匹配元素的文本内容。
val()取得的是值
2.节点操作
2.1创建节点：
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
2.2插入子节点：
$(A).append(B)表示将B追加到A中如：$ ("ul").append($newNode1);
$(A). prepend (B)表示将B前置插入到A中如：$ ("ul"). prepend ($newNode1);

<!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插入同辈节点：

$(A).after (B)表示将B插入到A之后如：$ ("ul").after($newNode1);
$(A). before (B)表示将B插入至A之前如：$ ("ul").before($newNode1);
2.4替换节点
replaceWith()
2.5复制节点
clone（）
2.6删除节点
remove（）
empty()
2.7获取节点属性
atrr()
2.8遍历子元素
children()
2.9遍历同辈元素
用于获取紧邻匹配元素之后的元素，
如：$("li:eq(1)").next().css("background-color","#F06");
用于获取紧邻匹配元素之前的元素，
如：$("li:eq(1)").prev().css("background-color","#F06")
用于获取位于匹配元素前面和后面的所有同辈元素，
如：$("li:eq(1)").siblings().css("background-color","#F06");
2.10遍历前辈元素
parent()父级元素
parents()组先级元素

<!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>

JQuery框架

JQuery

一、什么是JQuery

二、步骤

三、基础

四、选择器

五、事件

六、Dom操作

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读