search

博客列表 >JQUERY的极速入门

JQUERY的极速入门

JUNL的博客1111
JUNL的博客1111原创
2018年04月05日 22:37:53768浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1，JQUERY的工作原理</title>
    <style type="text/css">
        ul{margin:30px;
            padding:10px;
            overflow:hidden;
            background: none;

        }
        li{
           list-style-type:none;
            width:40px;
            height:40px;
            margin-left:10px;
            background: #ffc002;
            text-align:center;
            line-height:40px;
            font-size:1.5em;
            font-weight:border;
            float:left;
            border-radius:50%;
            box-shadow:2px 2px 2px #00b3ff;
            color:#000000;
        }
        li:first-child{
           /* background: #999999;*/
        }
        li:nth-child(4){
           /*background: darkblue;*/
            /*color:white*/
        }
        li:nth-child(4)~*{
           /* background: #000000;
            color:white;*/
        }
        </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>
<script type="text/javascript">
 //var li=document.getElementsByTagName('li')[0]
 //li.style.backgroundColor='pink'

   // var li=document.querySelector('li:nth-child(4)')
    //li.style.backgroundColor='pink'
    //li.style.color='white'
//queryselector只会返回符合条件的一个
 //queryselectorAll 会返回全部
 //var li=document.querySelector('li:nth-child(4)~*')
 //li.style.backgroundColor='pink'
 //li.style.color='white'

 var li=document.querySelectorAll('li:nth-child(4)~*')
 //alert(li.length)
 for(var i=0;i<li.length;i++){
 //li[i].style.backgroundColor='pink'
 //li[i].style.color='white'}
</script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

   // 以下未演示 待查
//$('li:nth-child(4)~*').css('background-color','white')
    $('li:nth-child(4)~*').addClass('red')
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.JQUERY的下载与引用</title>
</head>
<body>

</body>
</html>
<h2>PHP中文网</h2>
JQUERY就是一普通JS的外部文件
JS进官网下载(UNCOMPREEED DEVELOPED 3.3.1)
1,本地引入
2.CDN在线引入 CDN.CODE.BAIDU.COM
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    $('h2').click(function(){
        alert('WWW.PHP.CN')
    })

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.JUERY的工厂函数$()</title>
</head>
<body>
<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
    <li>我是列表项5</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
   //我们的任务将第一个列表项换颜色
    //document.getElementsByTagName('li')[0].style.backgroundColor='blue'

    //document.getElementsByTagName('li')[0]====$('li:first-child')
      //  .style.backgroundColor='blue'===css('background-color','blue')
  //  $('li:first-child').css('background-color','red')
//思考:在JQUERY对象上调用原生的DOM方法
     //$('li:first-child'): 将页面中的一个或多个DOM元素打包到一个JQ对象中
    //返回的是一个JQERY对象
    //$('li:first-child').style.backgroundColor='blue'
   //无操作
    //在JUERY对象上不能直接调用DOM方法,JQUERRY是一个DOM对象的数组.
     //$('li')[0].style.backgroundColor='blue'
    //这样可以将JQUERY对象转成DOM对象
    //$('li').get(0).style.backgroundColor='red'
     //$('li')[0].style.backgroundColor='blue'
    //原生对象转JQUERY对象 用$()工厂函数
    $('li:eq(4)').css('background-color','red')
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.JQUERY的基本语法</title>
</head>
<body>

<h2>基本语法:<span >$(选择器).方法()</span></h2>
<p>基本流程:使用选择器找到DOM元素并找包成JQUERY对象</p>
<p>调用JQUERY方法找到元素进行操作</p>

</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
 //   $('h2 span').css('color','red')
 //<h2>基本语法:<span style="color:blue">$(选择器).方法()</span></h2>-->
    $('p+p').html( '终于找到你了,开工吧')
   // $(selector):用来选择DOM元素并转化成JQUERY对象
 //$():它可以创建一个HTML元素

 //以下未演示 出不来 待查
 //var img=document.createElement('img')
// var img = document.createElement('img')
 //img.src='<img src="../image/001.jpg" width="150">'
  //img.src = '<img src="../image/001.jpg" width="150">'
 //document.getElementsByTagName('h2')[0].appendChild(img)
    //var img=$('<img src="../image/001.jpg"  width="150">')
   //img.insertAfter('h2')
    $('<img src="../image/001.jpg" width="150">').insertAfter('h2').css('border-radius','50%')
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.Jquery的执行方式</title>
    <style type="text/css">
    .horiz{
        float:left;
        list-style-type:none;
        margin:10px;
    }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script type="text/javascript">
       // window.onload=function(){
       // $('#list>li').addClass('horiz')
         //alert($(document).length)
        // }
         //$(document).ready(function(){
           //  $('#list>li').addClass('horiz')
         //})        //window.onload:在页面全部加载完成后会自动调用的事件
        //$(function(){$('#list>li').addClass('horiz')})
         $(document).ready()==windon.onload
        页面渲染顺序
        window.onload()全加载完成才能执行
        $(document).ready()正常执行 不延迟

    </script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
    <li>生活用品
    <ul>
        <li><a href="">淘宝</a></li>
        <li>衣服</li>
        <li>鞋子</li>
    </ul>
</li>
    <li>数码产品
        <ul>
            <li><a href="">京东</a></li>
            <li>笔记本</li>
            <li>手机</li>
        </ul>
    </li>
    <li>食品保健
        <ul>
            <li><a href="">拼多多</a></li>
            <li>奶粉</li>
            <li>玩具</li>
        </ul>
    </li>
</ul>
</body>
</html>
<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
//</script>
//<script type="text/javascript">
  //  $('#list>li').addClass('horiz')
//</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例



本课学习要点

1,如何使用CSS语言来选择元素

2,JQUERY是什么?它是一个JAVA SCRIPT的一个类库,函数库

3,我们为用什么要学习JQUERY

3-1 各个浏览器的兼容

3-2 JQUERY可以写的更少,用最少的内容表达

3-3 可以看懂其它程序员写的代码

4,JQUERY的编程思想

查询+操作,内置循环,迭代 

$(选择器)+操作(参数)

$( selector).option(args)

$('li:nth-child(4)~*).css('background-color','red')

$('li:nth-child(r)~*).addclass('red')

5,$()工厂函数的作用

5-1 查询元素

5-2 创建元素(必须输入到页面中才有效

6,JQUERY代码的执行方式


上一条：4.2jquery的两种引入和$(document).ready()使用方式与简写下一条：属性attr/css的用法-2017年4月5日19点50分
第十三课 JQUERY第一课
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多