19Jquery入门

Posted 2022-12-05 yungcs_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了19Jquery入门相关的知识，希望对你有一定的参考价值。

要求
1）掌握JSON及其应用
2）了解jQuery的背景和特点
3）理解js对象和jQuery对象的区别
4）掌握jQuery九类选择器及应用（上）

声明：今天服务端我们使用Struts2技术

一）什么是JSON
（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言，
以文本字符串为基础，且易于让人阅读
注意：XML就是一个重量级的数据交换语言
（2）JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言

二）JSON的作用
（1）简化创建自定义对象的方式
注意：JSON就是用JS语法来书写，所以必须放在

var p = 
            id:1,
            name:"哈哈",
            tel:[
                    
                        no:"135",
                        type:"中移动"
                    ,
                    
                        no:"133",
                        type:"中联通"
                    
                ],
            show:function(username)
                alert("你的姓名是:" + p.name+":"+username);
            ,
            isSingle:false          
        ;

var p = 'city':['北京','上海','广州','深圳'];
for(var i=0;i<p.city.length;i++)
    document.write(p.city[i]+"<br/>");

（2）在AJAX中，作为数据载体之一
注意：JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval(“”)函数接收一个字符串格式的内容。
（3）省份-城市-区域三级联动【Struts2 + JSON版】
切记：将来JSON是不能完完全全替代XML的，只能在定义对象和数据交换语言方面替代
action:
/**
* 根据省份查询城市
*/

public String findCityByProvinceMethod() throws Exception
        cityList = new ArrayList<String>();
        if("湖北".equals(province))
            cityList.add("武汉");
            cityList.add("黄岗");
        else if("湖南".equals(province))
            cityList.add("岳阳");
            cityList.add("张家界");
        else if("广东".equals(province))
            cityList.add("韶关");
            cityList.add("东莞");
        
        return "ok";

/**
 * 根据城市查询区域
 */

public String findAreaByCityMethod() throws Exception
        areaList = new ArrayList<String>();
        if("武汉".equals(city))
            areaList.add("AA");
            areaList.add("BB");
        else if("黄岗".equals(city))
            areaList.add("CC");
            areaList.add("DD");
        else if("岳阳".equals(city))
            areaList.add("EE");
            areaList.add("FF");
        else if("张家界".equals(city))
            areaList.add("GG");
            areaList.add("HH");
        else if("韶关".equals(city))
            areaList.add("II");
            areaList.add("JJ");
        else if("东莞".equals(city))
            areaList.add("KK");
            areaList.add("LL");
        
        return "ok";
    
private List<String> cityList;
    private List<String> areaList;
    public List<String> getCityList() 
        return cityList;
    
    public List<String> getAreaList() 
        return areaList;

   struts.xml

<package name="provinceCityAreaPackage" extends="json-default" namespace="/">
        <action 
            name="findCityByProvinceRequest" 
            class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
            method="findCityByProvinceMethod">
            <result name="ok" type="json">
            </result>
        </action>
   </package>

   导入：

struts2-json-plugin-2.3.1.1.jar

三）使用第三方工具，将JavaBean对象/List或Set或Map对象转成JSON
准备导入第三方jar包：
》commons-beanutils-1.7.0.jar
》commons-collections-3.1.jar
》commons-lang-2.5.jar
》commons-logging-1.1.1.jar
》ezmorph-1.0.3.jar
》json-lib-2.1-jdk15.jar
（1）JavaBean—–>JSON
》JSONArray jsonArray = JSONArray.fromObject(city);
》String jsonJAVA = jsonArray.toString();
（2）List—–>JSON
》JSONArray jsonArray = JSONArray.fromObject(cityList);
》String jsonJAVA = jsonArray.toString();
（3）List—–>JSON
》JSONArray jsonArray = JSONArray.fromObject(stringList);
》String jsonJAVA = jsonArray.toString();
（4）Set—–>JSON
》JSONArray jsonArray = JSONArray.fromObject(citySet);
》String jsonJAVA = jsonArray.toString();
（5）Map

function Photo()
    //属性
    var imgElement = document.images[0];
    //方法
    this.show = function()
        imgElement.style.visibility = "visible";
    
    this.hide = function()
        imgElement.style.visibility = "hidden";

//定义一个$()函数，用来定位标签

function $(str)
    //如果str变量是字符串类型
    if( typeof(str) == "string" )
        //获取str变量中的第一个字符
        var init = str.substring(0,1);
        //如果第一个字符是#的话
        if("#" == init)
            //获取str变量中除第一个字符外的其它字符
            var other = str.substring(1,str.length);
            //通过ID定位节点
            var element = document.getElementById(other);
            //如果找到了节点
            if(element != null)
                //返回
                return element;
            else
                //返回
                return null;
            
        else
            //继续判断
        
    else
        alert("参数必须为string类型");

<script type="text/javascript">
        //创建一个Photo对象
        var p = new Photo();
        //定位隐藏按钮，同时添加单击事件
        $("#hide").onclick = function()
            //调用Photo对象的方法
            p.hide();
        
        //定位显示按钮，同时添加单击事件
        $("#show").onclick = function()
            //调用Photo对象的方法
            p.show();
        
</script>

六）jQuery是什么
John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对html操作
参见<<什么是jQuery.JPG>>

七）为什么要使用jQuery
（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过标签插入一大堆js来调用命令了

八）jQuery开发步骤

（2）查阅并使用api手册，

$("#divID").html()/val()/text()/css("color","red")/....
//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);

九）js对象和jQuery对象相互转换
（1）什么是js对象及代码规则
就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
js代码规则—-divElement

        var divElement = document.getElementById("divID");
        var nameArray = new Array(3);

（2）什么是jQuery对象及代码规则
就是使用jQuery-API，返回的对象就叫做jQuery对象
jQuery代码规则—- $div var$ div = $(“#divID”)
声明：上述代码规则，只是老师个人规则，不代表所有企业都这样做

（3）js对象转成jQuery对象【重点】
语法： $(js对象)—->jQuery对象例如：$ (divElement)----> $div 例如：$ (this)----> $this 注意：jQuery对象将js对象做了封装，js对象二边无引号 var inputElement = document.getElementById(“inputID”);//js对象 var$ input = $(inputElement);//jquery对象 var txt =$ input.val();
alert(txt);

（4）jQuery对象转成js对象
语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
例如：$div[0]—->divElement
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然

        $div.innerHTML（错）
        divElement.html(错) 
var $div = $("#divID");//jquery对象
var divElement = $div[0];//js对象(方式一)
//var divElement = $div.get(0);//js对象(方式二)
var txt = divElement.innerHTML;       
alert(txt);

十）js对象和jQuery对象的区别
（1）js对象的三种基本定位方式
（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式
（A）通过ID属性： $(“#id属性值”) （B）通过标签名：$ (“标签名”)
（C）通过CLASS属性： (“.样式名”)（3）js对象出错的显示没有合理的提示信息例如：alert(document.getElementById(“usernameIDD”).value)（4）jQuery对象出错的jquery ajax实现省市二级联动

jquery ajax 三级联动，怎么在选择任意省份时，绑定对应的市，选择市时绑定对应得县，怎么做判断，谢谢啦

省市二级联动

Jquery基础入门-3-JQuery事件相关介绍

地区三级联动--省份province

简单入门JavaScript库jQuery：用选择符创建jQuery对象并应用方法