您的位置：首页 > Web前端 > JQuery

初识jquery（一）

2016-08-17 17:55 211 查看

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里面通过 script 标签插入一大堆js来调用命令了

使用jquery前首先需要引进引用第三方js库文件

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

代码。

<body>

<input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/>

<div id="divID">哈哈哈</div>

<script type="text/javascript">

//取得<input>标签中的value属性的内容

//js方式
var inputElement = document.getElementById("inputID");
var input = inputElement.value;
alert(input);

/*jquery方式*/
var $input = $("#inputID");
var input = $input.val();
alert(input);

//取得<div>标签中的文本内容

/*js方式*/
var divElement = document.getElementById("divID");
var div = divElement.innerHTML;
alert(div);

//jquery方式
var $div = $("#divID");
var div = $div.html();
alert(div);

</script>

</body>

jquery与js互相转换

<input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/>

<div id="divID">哈哈</div>

<script type="text/javascript">

/*取得<input>标签中的value属性的内容[js对象->jquery对象]
var inputElement = document.getElementById("inputID");//js对象
var $input = $( inputElement );//jquery对象
var input = $input.val();
alert(input);*/

//取得<div>标签中的文本内容[jquery对象->js对象]
var $div = $("#divID");//jquery对象

//var divElement = $div.get(0);//js对象
var divElement = $div[0];//js对象

b834
var div = divElement.innerHTML;
alert(div);

</script>

jquery和js对错误的处理方式。

<head>
<title>js操作与jQuery操作对错误的处理方式的比较</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.oneClass {
font-size: 44px;
color: red
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>

<input type="text" id="usernameID" value="这就是jQuery库" />

<div id="divID" class="oneClass">这是div标签中的内容</div>

<script type="text/javascript">

//通过"#id"定位<input>
//alert( $("#usernameID").val() );

//通过"标签名"定位<input><div>
//alert( $("input").val() );
//alert( $("div").html() );

//通过"样式名"定位<div>
//alert( $(".oneClass").html() );

//js错误处理和jquery错误处理
//alert( document.getElementById("usernameTD").value );
alert( $("#usernameID").val() );

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航