jQuery基础-入门知识

其他 2018-10-31 21:31:36 阅读次数: 0

一．      Jquery是什么？

a)    Jquery是一个JavaScript库，也叫做DOM库，它封装一堆JavaScript函数，方便我们操作dom节点。

b)    好处：提高开发效率。

二．      使用jquery的步骤：

a)    引入jquery

b)    查找节点

    i. 通过id选择器

    ii. 元素选择器

    iii. Class选择器

    iv.  后代选择器

c)    为节点绑定事件

     i.  on函数来为节点绑定事件

     ii.   单个元素对象和类数组对象都不需要for循环，直接绑定事件

d)    改变节点的属性、内容

   i.  获取和设置元素属性：attr

        1.    Attr（属性名称）：attr中只有一个参数时，代表获取元素属性。

        2.    Attr(属性名称，属性值):attr中有两个参数，代表为元素设置属性。

    ii.   获取和设置css属性：

        1.    Css（样式名称）：后去样式值

        2.    Css（{“样式名称”:“样式值”}）：设置样式值

     iii.  获取和设置元素内容：

        1.    Html():没有参数，代表获取内容

        2.    Html(“哈哈哈”):一个参数，代表设置内容

      iv. 给元素添加动画

        1.    Animate

//简单动画,(selector).animate({styles},speed,easing,callback)
$( "#start"). on( "click", function(){
$( "#box"). animate({ "left" : "500px"}, 'slow')
            . animate({ "top" : "500px"}, 'slow'). animate({ "left" : "100px"}, 'slow')
            . animate({ "top" : "0px"}, 'slow');
});

e)    对节点进行增删改查

三．      Jquery中的ajax：

a)    ajax是什么?

    i. 浏览器与服务端进行数据交互的对象。

b)    Jquery中ajax？

    i.  Jquery中对象原生ajax进行封装，封装了以下函数：

1.    $.get：发送get请求

2.    $.post:发送post请求

3.    $.ajax:可配置的ajax函数，支持get请求、post请求、jsonp等等。

案例：获取豆瓣数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>

<body>
    <div class="header">头部</div>
    <div class="nav">导航部分</div>
    <div class="wrap">
        <h2 id="title" class="title">正在热映</h2>
        <div id="movie-box" class="movie-box">
           
        </div>
    </div>
    <script src="../js/jquery.js"></script> 
    <script src="../js/ajax.js"></script>
</body>

</html>
*{margin:0;padding:0;list-style: none;}
a{
    text-decoration: none;
}
button{
    outline: none;
    border: 0 none;
}
.header{
    background: #545652;
    height: 28px;
    color: #fff;
}
.nav{
    background: #f0f3f5;
    height: 115px;
    margin-bottom: 40px;
}
.wrap{
    width: 1040px;
    margin:0 auto;
    background: moccasin;
    min-height: 900px;
}
.title{
    font: 15px Arial, Helvetica, sans-serif;
    color: #072;
    margin: 0 0 12px 0;
    line-height: 150%;
    color: #111;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 18px;
}
.movie-box dl{
    float: left;
    width: 115px;
    height: 250px;
    margin-right: 25px;
}
.movie-box dt{
    width: 115px;
    height: 161px;
    margin-bottom: 17px;
}
.movie-box dt img{
    width: 100%;
    height: 100%;
    display: block;
}
.movie-box dd{
    width: 115px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}
.movie-box dd a{
    color: #333;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.movie-box dd button{
    display: block;
    margin: 10px auto 0;
    text-align: center;
    width: 90px;
    height: 24px;
    line-height: 24px;
    background-color: #268dcd;
    color: #fff;
    border-radius: 2px;
}


var url = 'https://api.douban.com/v2/movie/in_theaters';
$.ajax({
    url:url,
    type:'GET',
    dataType: 'JSONP',
    success: function (json) {
        $("#title").html(json.title);
        var str = '';
        for (var i = 0; i < 5; i++) {
            str += '<dl>'
                + '<dt>'
                + '<img src="' + json.subjects[i].images.medium + '" />'
                + '</dt>'
                + '<dd>'
                + '<a href="' + json.subjects[i].alt + '">' + json.subjects[i].title + '</a>'
                + '<button>选座购票</button>'
                + '</dd>'
                + '</dl>';
        }
        $("#movie-box").html(str);
    }
    });



四、jQuery常用方法

1、eq() --jQuery 遍历方法

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

案例：选取第二个 <p> 元素（索引号为 1）：

$("p").eq(1).css("background-color","yellow");

2、on()-- jQuery 事件方法

$(selector).on(event,childSelector,data,function)

function 可选。规定当事件发生时运行的函数。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

案例：向 <p> 元素添加 click 事件处理程序：

$ ( document ) . ready ( function ( ) { $ ( " p " ) . on ( " click " , function ( ) { alert ( " 段落被点击了。 " ) ; } ) ; } ) ;

3、each()---jQuery 遍历方法

$(selector).each(function(index,element))

each() 方法为每个匹配元素规定要运行的函数

案例：输出每个 <li> 元素的文本：

$ ( " button " ) . click ( function ( ) { $ ( " li " ) . each ( function ( ) { alert ( $ ( this ) . text ( ) ) } ) ; } ) ;

4、off()-- jQuery 事件方法

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

案例：移除所有 <p> 元素上的 click 事件：

$("button").click(function(){
$("p").off("click");
});

5、val()-- jQuery HTML/CSS 方法

val() 方法返回或设置被选元素的 value 属性。

案例：设置 <input> 字段的值：

$ ( " button " ) . click ( function ( ) { $ ( " input:text " ) . val ( " Glenn Quagmire " ) ; } ) ;

五、jquery基础练习

1、选项卡

(1)jquery版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv = "X-UA-Compatible" content = "IE=7" >    -->
    <title>jquery版本一二选项卡</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        #btn-list{
            height: 30px;
            width: 306px;
        }
        #btn-list li{
            float: left;
            width: 100px;
            height: 30px;
            background: skyblue;
            border: 1px solid #eee;
        }
        
        #btn-list .active-btn{
            background: blue;
        }
        #box-list {
            width: 306px;
            height: 300px;
            position: relative;
        }
        #box-list .active-box{
            display: block;
        }
        #box-list li{
            width: 306px;
            height: 300px;
            background: yellow;
            display: none;
        }
    </style>
</head>
<body>
    <ul id="btn-list">
        <li class="active-btn">按钮一</li>
        <li>按钮二</li>
        <li>按钮三</li>
    </ul>
    <ul id="box-list">
        <li class="active-box">我是第一个盒子</li>
        <li>我是第二个盒子</li>
        <li>我是第三个盒子</li>
    </ul>
    <script src="../js/jquery.js"></script>
    <!-- jquery版本 -->
    <script>

        //版本一二步骤
        //1、为活动的元素设置选择器，给活动元素设置内联样式，
            //并给选择器设置所需样式
        //2、引入jquery
        //3、查找节点，为节点绑定事件
        //4、改变节点的属性内容

        //第一个版本选项卡
        // $("#btn-list li").on("click",function(){
            //在点击之前先清空其他li的样式
        //    $("#btn-list li").attr("class","");
        //    $("#box-list li").attr("class","");
        //再对活动的元素设置属性和内容
        //    $(this).attr("class","active-btn");
        //    $("#box-list li").eq($(this).index()).attr("class","active-box");
        // });

        // 第二个版本选项卡
        $("#btn-list li").on("click",function(){
            //对这两个元素的值遍历进行清空
            $("#btn-list li,#box-list li").each(function(){
                $(this).attr("class","");
                console.log($(this));//每一个li
            });
            $(this).attr("class","active-btn");
            console.log($(this));//当前点击的li
            $("#box-list li").eq($(this).index()).attr("class","active-box");
        });

            
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv = "X-UA-Compatible" content = "IE=7" >    -->
    <title>jq选项卡Myjquery版本</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        #btn-list{
            height: 30px;
            width: 306px;
        }
        #btn-list li{
            float: left;
            width: 100px;
            height: 30px;
            background: skyblue;
            border: 1px solid #eee;
        }
      
        #box-list {
            width: 306px;
            height: 300px;
            position: relative;
        }
        #box-list li{
            width: 306px;
            height: 300px;
            background: yellow;
            display: none;
        }
    </style>
</head>
<body>
    <ul id="btn-list">
        <li class="btn"  style="background:blue;">按钮一</li>
        <li class="btn" >按钮二</li>
        <li class="btn" >按钮三</li>
    </ul>
    <ul id="box-list">
        <li class="box" style="display:block;">我是第一个盒子</li>
        <li class="box" >我是第二个盒子</li>
        <li class="box" >我是第三个盒子</li>
    </ul>
    <script src="../js/MyJquery2.js"></script>
    <script>
       $(".btn").on("click",function(){
           $(".btn").attr("style","");
           $(".box").attr("style","");
           $(this).attr("style","background:blue");
           $(".box").eq($(this).index()).attr("style","display:block");
       });
// $("#btn-list li").on("click",function(){
//         $(this).css( {"background":"yellow"} ).siblings().css({"background":""});
  //        $("#box-list li").eq( $(this).index() ).css({"display":"block"}).siblings().css({"display":"none"});
  //    })
    </script>
</body>
</html>

（2）js版本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js版本选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .btn-list {
            width: 408px;
            height: 30px;

        }

        .btn-list li {
            width: 100px;
            height: 30px;
            border: 1px solid pink;
            background: skyblue;
            float: left;
        }

        .box-list {
            width: 408px;
            height: 200px;
            background: silver;
        }

        .box-list li {
            width: 408px;
            height: 200px;
            display: none;
        }
    </style>
</head>

<body>
    <ul id="btn-list" class="btn-list">
        <li style="background:pink;">美食</li>
        <li>娱乐</li>
        <li>住宿</li>
        <li>景点</li>
    </ul>
    <ul id="box-list" class="box-list">
        <li style="display:block;">美食</li>
        <li>娱乐</li>
        <li>住宿</li>
        <li>景点</li>
    </ul>

    <script>
        var oBtn = document.querySelectorAll("#btn-list li");
        console.log(oBtn);
        var oBox = document.querySelectorAll("#box-list li");
        console.log(oBox);
        for (var i = 0; i < oBtn.length; i++) {
            oBtn[i].index=i;
            oBtn[i].onclick = function () {
                for (var j = 0; j < oBtn.length; j++) {
                    oBtn[j].style.background = '';
                    oBox[j].style.display='none';
                }
                this.style.background = 'pink';
                oBox[this.index].style.display='block';
            }
        }

        // var oBtnList=document.getElementById("btn-list");
        // var oBtn=oBtnList.getElementsByTagName("li");
        // var oBoxList=document.getElementById("box-list");
        // var oBox=oBoxList.getElementsByTagName("li");

        // for(var i=0;i<oBtn.length;i++){
        //    oBtn[i].index=i;
        // //    console.log( oBtn[i].index);
        //    oBtn[i].onclick=function(){
        //        for(var j=0;j<oBtn.length;j++){
        //            //在点击按钮之前去掉按钮所有的背景色
        //            oBtn[j].style.background='';
        //            console.log(oBtn[j]);
        //            oBox[j].style.display='none';
        //        }
        //        //鼠标点击的按钮有背景色
        //        this.style.background='pink';
        //        oBox[this.index].style.display='block';
        //    }
        // }
    </script>
</body>

</html>

2、图片切换

<!DOCTYPE html>
<html laImgng="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js jq版图片切换</title>
    <style>
        *{margin:0;padding:0;list-style: none;}
        .box{width: 400px;height: 300px;margin-bottom: 20px;}
        .slider{width: 400px;height: 100px;}
        .slider li{ width: 76px;height: 76px; float: left; padding:10px;border: 2px solid #eee; }
        img{width: 100%;height: 100%;}
    </style>
</head>
<body>
    <div class="box">
        <img id="box" src="images/pic1.jpg" alt="">
    </div>
    <ul id="slider" class="slider">
        <li><img src="images/pic1.jpg" alt=""></li>
        <li><img src="images/pic2.jpg" alt=""></li>
        <li><img src="images/pic3.jpg" alt=""></li>
        <li><img src="images/pic4.jpg" alt=""></li>
    </ul>
    <script src="../js/jquery.js"></script>
    <script>
        //js版本
        // var oBox=document.getElementById("box");
        // var oImg=document.querySelectorAll("#slider img");
        // console.log(oImg);
        // for(var i=0;i<oImg.length;i++){
        //     oImg[i].onclick=function(){
        //         oBox.src=this.src;
        //     }
        // }
        //jq版本

        $("#slider img").on("click",function(){
            var oSrc=$(this).attr("src");
            console.log(oSrc);
            $("#box").attr("src", oSrc);
        });
    </script>
</body>
</html>

3、网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页换肤</title>
    <link id="link1" href="css/css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <dl id="message">
		<form>
			<dt>
				<strong>可以换肤的提交框：</strong>
				<input id="btn1" type="button" value="皮肤1"  />
				<input id="btn2" type="button" value="皮肤2" />
			</dt>
			<dd>输入姓名：
				<input class="text" type="text" />
			</dd>
			<dd>输入密码：
				<input class="text" type="password" />
			</dd>
			<dd>请您留言：
				<textarea></textarea>
			</dd>
			<dd class="center">
				<input class="btn" type="submit" value="提交" />
			</dd>
		</form>
	</dl>
	<script src="js/jquery.js"></script>
	<script>
		// js版本
		// var oBtn1=document.querySelector("#btn1");
		// var oBtn2=document.querySelector("#btn2");
		// var oLink=document.querySelector("#link1");

		// 1、获取DOM节点
		// var OBtn1=document.getElementById("btn1");
		// var oBtn2=document.getElementById("btn2");
		// var oLink=document.getElementById("link1");
		// 2.为DOM节点绑定html事件
		// OBtn1.onclick=function(){
		// 3.操作DOM属性
		//设置节点属性值：节点对象.属性名称 = 新属性值
			// oLink.href='css/css1.css';
		// }
		// oBtn2.onclick=function(){
			// oLink.href='css/css2.css';
		// }

		// jq版本
		$("#btn1").on("click",function(){
			$("#link1").attr("href","css/css1.css");
		});
		$("#btn2").on("click",function(){
			$("#link1").attr("href","css/css2.css");
		});
	</script>
</body>
</html>

4、焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>焦点事件</title>
</head>
<body>
    <input id="input" type="text" value="请输入你要搜索的关键词">
    <script src="js/jquery.js"></script>
    <script>
    //    js版本
    //    var oInput=document.getElementById("input");
    //    oInput.onfocus=function(){
    //        this.value='';
    //        console.log(oInput.value);
    //    }
    //    oInput.onblur=function(){
    //        this.value='请输入你要搜索的关键字';
    //        console.log(oInput.value);
    //    }

    //jq版本

    $("#input").on("focus",function(){
        $(this).attr("value","");
    });
    
    $("#input").on("blur",function(){
        $(this).attr("value","请输入你要搜索的关键字");});
//$("#input").on("focus",function(){
    //       $(this).val('');
   //    });
   //    $("#input").on("blur",function(){
    //       $(this).val('请输入你要搜索的关键词');
    //   });
    </script>
</body>
</html>

5、渲染后台数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>渲染后台数据</title>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="list">
            <tr>
                <td>小毛</td>
                <td>32</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <script>
        //操作节点的内容：
        //innerHTML:直接替换节点里原有的内容
        //1.字符窜模板：当字符窜中有html元素，
        //将字符窜插入到真实父节点中，字符窜中的元素就会变成真实的节点。
        var list = [
            { name: "小明", age: 18, sex: '男' },
            { name: "小芳", age: 12, sex: '女' },
            { name: "小刚", age: 20, sex: '男' },
            { name: "小羊", age: 16, sex: '女' }
        ];
        var oTbody = document.getElementById("list");
        var str = '';
        //通过字符串拼接
        for (var i = 0; i < list.length; i++) {
            str += '<tr><td>' + list[i].name + '</td><td>' + list[i].age + '</td><td>' + list[i].sex + '</td></tr>';
        }
        console.log(str);
        oTbody.innerHTML = str;  // $("#list").append(str);
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/DREAM_XA/article/details/80488728
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022