1.导包。
2.案例：自定义SQuery框架，写一些简单的方法
//新建一个js文件，将JQuery的代码复制进去，只留下//(function( window, undefined ) {//})( window );//在中间添加自己的方法//案例代码(function( window, undefined ) {String.prototype.addinfo=function (){document.write("加法"+"<br />");}String.prototype.subinfo=function (){document.write("减法"+"<br />");}String.prototype.mulinfo=function (){document.write("乘法"+"<br />");}String.prototype.divinfo=function (){document.write("除法"+"<br />");}String.prototype.insinfo=function (){document.write("增加方法"+"<br />");}String.prototype.delinfo=function (){document.write("删除方法"+"<br />");}String.prototype.updinfo=function (){document.write("修改方法"+"<br />");}String.prototype.selinfo=function (){document.write("查询方法"+"<br />");}
})( window );
导入自定义的SQuery框架，调用里面的方法
//src="需要导入的js文件"，
<script src="js/Zquery.js" type="text/javascript" charset="utf-8"></script><body><script type="text/javascript">var str = "";//定义一个数组，调用导入的js文件中的函数(方法)str.addinfo();str.subinfo();str.mulinfo();str.divinfo();str.insinfo();str.delinfo();str.updinfo();str.selinfo();</script></body>3.案例：JQuery选择器（ID选择器，标签选择器，类选择器，组合选择器，层级选择器，）
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><body><input type="button" value="测试Id选择器" onclick="testId()"/><input type="button" value="测试Id选择器02" onclick="testID02()"/><input type="button" value="测试Id选择器03" onclick="testID03()"/><input type="button" value="测试Id选择器04" onclick="testID04()"/><input type="button" value="标签选择器" onclick="testLabel()"/><input type="button" value="类选择器" onclick="testClass()"/><input type="button" value="组合选择器" onclick="testAll()"/><input type="button" value="层级选择器" onclick="testCj()"/><input type="button" value="子选择器" onclick="testChild()"/><hr /><!--ID选择器--><input type="text" value="后边会用Jquery做各种小练习" id="textID"/><hr /><input type="text" value="菊花关" id="jhgID"/><hr /><input type="text" value="老鬼" id="lgID"/><hr /><input type="text" value="昊天锤" id="htID"/><!--类选择器--><input type="text" value="zql" class="zqlclass"/><input type="text" value="zql02" class="zqlclass"/><input type="text" value="zql03" class="zqlclass"/><hr /><!--子选择器--><div id="divID"><input type="text" value="盖浇饭"/><input type="text" value="油泼面"/><input type="text" value="饺子"/></div><script type="text/javascript">//ID选择器function testId(){//通过Jquery方法，拿到id编号为textID的对象var result =window.jQuery("#textID");//用val(),将textID中“value属性”对应的值，现在对话框中alert(result.val());}function testID02(){var jhg = jQuery("#jhgID");alert(jhg.val());}//注意事项：$和jQuery一样 function testID03(){var lg = window.$("#lgID");alert(lg.val());}function testID04(){alert($("#htID").val());}//标签选择器function testLabel(){var result = window.$("input");for(var i= 0;i<result.length;i++){document.write(result[i].value+"<br />");}}//类选择器function testClass(){var result = window.$(".zqlclass");for(var i= 0;i<result.length;i++){document.write(result[i].value+"<br />");}}//组合选择器function testAll(){var result = $("input,hr");//获取页面中所有的input元素，和hr元素，for(var y=0;y<result.length;y++){document.write(result[y].value+"<br />");}}//层次选择器function testCj(){
// var result = window.$("input:first");//获取，页面中第一个input元素
// alert(result.val());
// result = window.$("input:last");//获取，页面中最后一个input元素
// alert(result.val());result = window.$("input:eq(1)");//获取指定位置的input元素eq(num从0开始)alert(result.val());}//子选择器function testChild(){var result = $("#divID>input");//获取id为divID的元素里面，所有input元素
// alert(result.length);
// alert(result[0].value);
// alert(result[1].value);
// alert(result[2].value);for(var i=0;i<result.length;i++){document.write(result[i].value+"<br />");}}</script>4.案例 ：操作元素HTML
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><body><h1>操作元素HTML</h1><input type="button" id="btn1" value="获取元素内容---HTML" onclick="butt1()"/><input type="button" id="btn1" value="修改元素内容---HTML" onclick="butt2()"/><div id="divD"><p>这是一个DIV标签</p></div><script type="text/javascript">function butt1(){//$('p').html();//获取p元素里的内容var divtext = window.jQuery("#divD>p");alert(divtext.html());}function butt2(){//往p元素中添加内容//$("p").html("Hello <b>world</b>!");var divtext = window.jQuery("#divD>p");//divtext.html("这是一个DIV标签,332255");divtext.html(divtext.html()+"332255");}</script></body>5.案例：操作样式--css
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script><body><input type="button" id="btn1" value="操作样式--css" onclick="btndiv()"/><div id="divid" style="background-color: red; width: 300px; height: 300px; border: 2px solid;" ></div><div id="" style="background-color: yellow; width: 300px; height: 300px; border: 2px solid;">我是DIV01</div><script type="text/javascript">function btndiv(){
// window.$("#divid").css("background","yellow");//两种方式都可以实现，background-color 显的更为严谨window.$("#divid").css("background-color","yellow");}</script></body>