jquery是什么

jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数得到一整套定义好的方法。
现今jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。

有什么好处

它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的喜爱和选用。

jquery功能

1.精确选择页面对象
2.进行可靠的CSS样式控制
3.使DOM操作规范化
4.标准化事件控制
5.支持网页特效
6.快速通信
7.扩展JavaScript内核

如何使用jquery

1)下载地址jquery.com
2)版本说明
jquery.3..js 开发版（空间大有格式）
jquery.3..min.js 发布版（空间小无格式）
3)使用向引用普通js一样引用jquery
jquery如果与其他js框架混用的话，建议放到引用的第一行
在工程目录下建一个/js目录。将jquery的文件拷贝到下面
\js\jquery-1.11.2.min.js
4）页面使用时。
step1 引用jquery
<script src="../js/jquery-1.11.2.min.js"></script>
语法规则
$(选择器).action();
document.ready()和window.onload()区别
1)加载时机不同document.ready()是文档加载完毕即执行。window.onload()需要等待页面上所有的内容都加载完才可以执行
2）document.ready()在同一个页面里可以写多次，onload只能写一次
3）document.ready()有简化写法
四种写法

 $(document).ready(function () {
        alert("helloworld");
        }
    )
    jQuery(document).ready(function () {
            alert("helloworld");
        }
    )

    jQuery(function () {
            alert("helloworld");
        }
    )
    $(function () {
            alert("helloworld");
        }
    )

学生练习

使用4种写法在页面加载时弹出"hello jquery"

对象转换

普通对象转换成JQ对象时，用$()把对象包起来就ok
例子：

 <script>
    $(function () {
        var lis=document.getElementsByTagName("li");//获取li对象集合
        //把其中的第二个元素转化为jquery对象
        var $li=$(lis[1]);
        alert($li.html())
        }
       )
</script>

<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>

jquery转成dom,用get索引的方式

例子：

 $(function () {
        var $li=$("li");//jq语法选择li
        //转换成dom类型的li
        var li2=$li[1];
        alert(li2.innerHTML);
    })
    $(function () {
        var $li=$("li");//jq语法选择li
        //转换成dom类型的li
        var li2=$li.get(1);
        alert(li2.innerHTML);
    })
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>

jquery常用语法

css引用方式：
第一种.css(key,value);

<div id="div1"></div>
<script>
$(function () {
$("#div1").css("width","300px")
.css("height","400px")
.css("background-color","red");
})
</script>

第二种.addClass(classname);

<div id="div1"></div>
<style>
    .class1{
        width: 300px;
        height: 200px;
        border:1px solid blue;
    }
</style>
<script>
    $(function () {
        $("#div1").addClass("class1");
    })
</script>

next()用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$(".item1").next().next().css("color","green");
})
</script>
</head>
<body>
<ul>
<li class="item1">line1</li>
<li>line2</li>
<li>line3</li>
</ul>
</body>
</html>

html()获取html内容, 类似原生js的innerHTML
text()获取文本内容，类似原生js的innerText

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
$(".item1").next().next().css("color","green");
alert($(".item1").next().html());
alert($(".item1").next().text());
})
</script>
</head>
<body>
<ul>
<li class="item1">line1</li>
<li><p>line2</p></li>
<li>line3</li>
</ul>
</body>
</html>

打印结果是
<p>line2</p>
line2
总结：.text()是获取纯文本内容，过滤html部分
.html（）可以获取html内容

jquery事件

介绍其中一种写法，以后还会介绍其他写法

$(选择器).事件(function(){}）

如：
<span id="text1"> text1</span>

<script>
    $(function () {
        $("#text1").click(function () {
            $(this).css("font-size","30px");
        });
    })
</script>

课堂练习：
1、需求说明
实现问答特效
点击问题后，解答在下面显示出来（使用了click()方法)
2、需求说明
点击页面中的文字“请为我们的服务做出评价”，弹出消息框，显示“非常满意”
将DOM对象转换为jQuery对象，再调用jQuery对象的方法
3、需求说明
使用DOM方式进行判断，当复选框选中时，弹出窗口
将jQuery对象转换为DOM对象，再调用DOM对象的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-1.11.2.min.js"></script>
<script>
$(function () {
   var $chk1= $("#chk1");
   var chk_sim=$chk1.get(0);
/*$chk1.click(function () {
if(chk_sim.checked){
alert("操作成功");
}
})*/
chk_sim.onclick=function () {
if(chk_sim.checked){
alert("操作成功");
}
}
})
</script>
</head>
<body>
<!--需求说明-->
<!--使用DOM方式进行判断，当复选框选中时，弹出窗口-->
<!--将jQuery对象转换为DOM对象，再调用DOM对象的方法-->
<input id="chk1" type="checkbox">接受服务条款
</body>
</html>

第1章 jquery基础(4课时)