实例
<!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" />
<!--1.cdn 引入方式 （建议采用百度cdn，多数用户已经加载过）-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<!--2.本地引入（适用于离线开发）-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
// 在DOM加载完后执行代码块，相对于 window.onload = function（）{} 优势在于window.onload方法需要加载DOM和网路资源
// 方法一:
$(document).ready(function(){
alert('测试文本：方法一')
//$('li').css({'background':'lightblue','display':'block','width':'500px','height':'500px'})
//$('<img src="php中文网练习/js/images/1.jpg" alt="头像" width="50"/>').insertBefore('li').css('border-radius','50%')//链式操作
})
// 方法二：
$(function(){
alert('测试文本：方法二')
// 20180402知识点:
// 基本语法：$(selector).option()
// 1. $() 工厂函数的使用
// 1.1 查询(选择器selector) 选择器支持大部分的css选择器 exp:$('li') , $('.header') 等
// 1.2 创建 DOM结构 insertAfter() insertBefore()
// $('<img src="php中文网练习/js/images/1.jpg" alt="头像" width="50"/>').insertBefore('li')
// 2. css() 方法
// 2.1 查询到元素之后 使用css()方法 exp: css('background','red') 如果是多个参数 采用对象的声明方式
// exp：$('li').css({'background':'lightblue','display':'block','width':'500px','height':'500px'})
// 3.click()方法 点击事件 click([[data],fn]) [data]传入的数组是目的是fn函数处理的
// 4.jquery转换JavaScript原生js的方法
// 4.1 jQuery返回的是对象 可以通过 get(参数) ：参数是指对象数组中的索引 也可以通过[index] 数组的索引调用
// 5.addClass()给某个元素加类样式
//
})
</script>
<title>jQuery入门</title>
</head>
<body>
<ul>
<li>测试文本</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
