Jquery
来源:互联网 发布:淘宝店铺名怎么修改 编辑:程序博客网 时间:2024/06/07 04:52
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
Jquery使用方式
导入jquery的js文件
jquery-1.11.0.min.js
在html或者jsp进行关联
<script src="../js/jquery-1.11.0.min.js"></script>
Jquery使用
jquery基本运用
获取jquery中dom对象
//获取dom对象var $username = $("#username");//弹出dom对象中的valuealert($username.val())
js和jquery转换
js对象转成jquery对象
var obj = document.getElementById("username");var $jobj = $(obj);alert($jobj.val());
jquery对象转成js对象
var $u=$("#username");var u=$u[0];alert(u.value);
事件派发
$(function() { $("#mbt").click(function() { alert("哈哈哈,被点击了") });});
各种事件
页面加载事件
onload = function() { alert(12);}$(function() { alert ("hahaha");})
获取焦点 失去焦点
$(function() { $("#username").blur(function() { alert("失去焦点"); }).focus(function() { alert("获取到焦点"); }); });$(function() { $("#e01").mouseover(function() { alert("鼠标移上"); }).mouseout(function() { alert("鼠标移出") });});
JQuery选择器
选择器效果
标签选择器
$("div")
id选择器
$("#div1")
类选择器
$(".div1")
所有元素的选择器
$("*")
组合选择器
$("div,#div1")
层次选择器
$("div p")$("div .mini")
选择自己
$(this)
属性选择器
$("[href]");
奇数偶数选择器
$("tr:even");$("tr:odd");
类型选择器
$(":button")
属性选择器
$([name='username'])
jquery基本效果
显示隐藏
hide()show()toggle()
淡入淡出
fadeIn()fadeOut()fadeToggle()
滑动
slideDown()slideUp()slideToggle()
jQuery HTML
jQuery 捕获 和设置
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值获取属性 - attr() alert($("#w3s").attr("href"));设置属性$("#a").attr("href", "http://www.baidu.com");
JQuery 添加元素
append() - 在被选元素内部的结尾插入指定内容prepend() - 在被选元素内部的开头插入指定内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容
JQuery 删除元素
remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素$("p").remove(".italic");
案例演示
全选全不选
prop() 方法prop() 方法设置或返回被选元素的属性和值。<table id="tab1" border="1" width="800" align="center"><tr> <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td></tr><tr> <th><input type="checkbox" id="selectAll"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th></tr><tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td></tr><tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td></tr><tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td></tr><tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td> <a href="">修改</a>| <a href="">删除</a> </td></tr>
$(".itemSelect").prop("checked",$(this).prop("checked"));
省市联动
<select name="pro"> <option >-请选择-</option> <option value="0">黑龙江</option> <option value="1">吉林</option> <option value="2">辽宁</option> <option value="3">河南</option> </select><select name="city"> <option >-请选择-</option> </select>// 定义二维数组:var arr = new Array(4);arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");arr[1] = new Array("长春市","吉林市","四平市","通化市");arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");$(function() {$("#pro").change(function() { //获取当前所选择的城市信息 var pro = $(this).val(); //初始化city的信息 $("#city").html($("<option>").html("-请选择-")); //获取数组 var cityArr = arr[pro]; //遍历数组 for(var i = 0; i < cityArr.length; i++) { $("#city").append("<option>" + cityArr[i] + "</option>") }});})
ssh框架相关jar包和api,json,jquery,ajax
阅读全文
0 0
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQUERY
- jquery
- jQuery
- jquery
- jquery
- ES6 check AND Babel
- C
- Qt中数据库基本操作--QSqlQuery
- jquery开发:jQuery实现当按下回车键时绑定点击事件
- 暑假集训test7
- Jquery
- Spire.Email 教程2:如何在C#,VB.NET 中发送批量电子邮件
- 每隔几秒切换一次文本的TextView的实现
- Python单元测试+文档测试
- IP地址判断
- Linux服务器添加站点域名管理
- [leetcode javascript解题]N-Queens
- Servlet解析
- python requests post 文件,图片