jQuery基础知识点(下)
在实际开发中,jQuery的实践性非常强大。上一篇本人已经整理出了一部分基础知识点,该文即是对以上的补充和扩展。
1、表单值的操作
//获取文本框的值
//txt.value
var val = $("#txt").val(); //没有参数表示获取值
//设置文本框的值
//txt.value = "123123";
$("#txt").val("这是val设置的值"); // 有参数表示设置值
2、属性操作
// 设置属性
$("#btnSetAttr").click(function () {
// getAttribute
// 用法跟 css 方法完全相同
// $("a").attr("title", "传智播客"); //设置单个属性
$("a").attr({ //设置多个属性
"title": "传智播客",
"data-abc": "自定义属性"
});
});
// 获取属性
$("#btnGetAttr").click(function () {
/*var a = $("a").attr("title");
console.log(a);*/
// $("a").attr("width");
});
3、特性操作
// 设置选中/不选中
// input.checked = true;
// input.checked = flase;
$(id/class名).attr("checked",布尔值); // :checkbox 作用:获取到所有复选框
prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属性。
4、操作文本内容
// 获取内容
// 文本内容:js -> innerText / textContent
$("button:eq(0)").click(function () {
// text() 作用:获取或者是设置内容
var txt = $("div").text();
alert(txt);
});
// 设置文本内容
$("button:eq(1)").click(function () {
// 设置内容,参数表示 要设置的内容
$("div").text("这是动态设置的内容");
});
// 获取HTML内容
$("button:eq(2)").click(function () {
alert($("div").html());
});
5、高度和宽度操作
// 获取高度
$("#getHeight").click(function () {
/* var h = $("div").css("height");
console.log(h); // 200px 字符串 */
/* var h = $("div").height(); // 数值
h *= 2;
console.log(h); */
});
// 设置高度
$("#setHeight").click(function () {
// 参数:数值类型
// $("div").height(500);
// 参数:字符串
// $("div").height("500");
$("div").height("500px");
});
6、坐标值操作
// 获取元素的坐标值
$("button:eq(0)").click(function () {
// 不传参数表示获取
var offset = $("div").offset();
console.log(offset); // 返回值:{top: 29, left: 8}
});
// 设置元素的坐标值
$("button:eq(1)").click(function () {
// 注意:设置坐标值的时候,如果这个元素没有定位或者定位为默认值 static
// 那么offset() 会把这个元素的定位设置为:position: relative;
$("div").offset({
top: 200,
left: 400
});
});
7、bind事件绑定
$("button").bind("click mouseenter", function() {});
// 第一个参数:表示事件的名称
// 第二个参数:表示事件处理函数
// 绑定多个事件
$("button").bind({
click: function () {},
mouseenter: function () {}
});
// 缺点:无法给动态创建出来的元素绑定事件
8、delegate 代理绑定事件
// 第一个参数:表示 一个选择器,实际要触发事件的元素
// 第二个参数:表示要触发的事件名称
// 第三个参数:表示 事件处理函数
$("div").delegate("p", "click", function() {
var txt = $(this).text(); // 获取当前元素的内容
});
9、on()绑定事件
// 第一个参数:表示要绑定的事件名称
// 第二个参数:表示要触发事件的元素(selector)
// 第三个参数:表示事件处理函数
$("div").on("click", ".cls", function () {
var txt = $(this).text(); // 获取当前元素的内容
});
10、事件解绑
$("button:eq(1)").bind("click", function () {
// 解除第一个按钮绑定的事件
// 不传参数,表示所有的事件都解绑了
// 穿参数,表示解绑 事件的名称
//$("button").eq(0).unbind("click mouseenter");
// $("button").eq(0).undelegate();
});
// 注意:解绑事件的时候 是解除的绑定事件的元素
2)使用off 解绑
$("#btnOff").on("click", function () {
// 解除第一个按钮的事件绑定
// 参数:表示要解除事件的名称
// 如果是解除多个事件,只需要把多个事件名称以空格分割 作为一个字符串
$("#btn").off("click mouseenter");
// 如果不穿参数表示把所有的事件都解除绑定
$("div").off();
// 解除通过 代理 的方式绑定的事件
// 第一个参数表示:要解除事件的名称
// 第二个参数表示:只解除通过代理方式绑定的事件
$("div").off("click", "**"); });
11、事件触发
// 触发文本框获得焦点事件
// trigger() 作用:触发事件,同时触发了浏览器的默认行为
$("#txt").trigger("focus"); // 参数:表示触发事件的类型
// triggerHandler() 作用:只触发事件,不触浏览器的发默认行为
2)
$(function () {
// target 表示触发事件的元素 并不一定是 this
// currentTarget === this
$("button").on("click", function (event) {
console.log(event);
});
$("div").on("click", function () {
console.log(event);
});
// -----------------------------------------------
$("div").on("click", "button", function () {
// 此时, target为触发事件的按钮
// currentTarget 为绑定事件的元素
console.log(event);
});
});
12、事件对象
2)阻止事件冒泡
e.stopPropagation();
13、链式编程原理
// 链式编程代码示例
$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);
链式编程原理:return this;
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。
end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的一次状态。
14、隐式迭代
// 设置操作
$(“div”).css(“color”, “red”);
// 获取操作
$(“div”).css(“color”); // 返回第一个元素的值
// 隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
// 如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
15、each方法
// each() 作用:进行遍历
// 参数:是一个匿名函数
$("li").each(function (index, ele) {
// index: 索引号
// ele : 表示元素本身 但是它是一个dom对象
// index : 0 1 2 3 .... 9
var opacity = (index + 1) / 10;
// ele.style.opacity = opacity;
$(ele).css("opacity", opacity);
});
16、多库共存
var j = $.noConflict();
// noConflict() 作用:让jQuery释放对$的控制权,让其他库能够使用$符号,达到多库共存的目的。此后,只能使用jQuery来调用jQuery提供的方法
17、插件 和 制作
jQuery.color.js
// animate()自定义动画:不支持背景的动画效果
// animate动画支持的属性列表
// 全局jQuery函数扩展方法
$.pluginName = function() {};
// jQuery对象扩展方法
$.fn. pluginName = function() {};
18、jQueryUI的基本使用
<!--第一步:引样式文件-->
<link rel="stylesheet" href="plugins/jquery-ui.css"/>
<!--第二步:引jQuery文件-->
<script src="jquery-1.12.2.js"></script>
<!--第三步:引jQueryUI的文件-->
<script src="plugins/jquery-ui.js"></script>
jQuery基础知识点(下)的更多相关文章
- JQuery基础总结下
JQuery动画与特效 show()和hide()方法可以用来显示和隐藏元素,toggle()方法用来切换显示和隐藏. $(selector).hide(speed,[callback]); $(se ...
- jQuery基础知识点(DOM操作)
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- Jquery基础知识点
1.选择器:查找和过滤 查找:向下查找用find(), 向上查找用parent(), 同级查找用next(), prev() 过滤:和函数式编程的map.filter类似,jQuery对象也有类 ...
- jQuery基础知识点(上)
jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支 ...
- jquery基础知识点总结
Jquery是一个优秀的js库,它简化了js的复杂操作,不需要关心浏览器的兼容问题,提供了大量实用方法. Jquery的写法 方法函数化 链式操作 取值赋值合体] $(“p”).html(); 取 ...
- Jquery基础知识点梳理
1.第一个jq程序 a.jq对象和dom对象的方法不能混用 b.dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了 2.jq选择器 基本选择器 $('b ...
- JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- .NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
随机推荐
- 第1章-如何使用本书—零死角玩转STM32-F429系列
第1章 如何使用本书 1.1 本书的参考资料 集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com ...
- TryParse()的用法
DateTime dt = new DateTime(); DateTime.TryParse(txtName.text.trim(),out dt); string str1 = dt.ToStri ...
- 简单了解:Web前端攻击方式及防御措施
一.XSS [Cross Site Script]跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用 ...
- Problem 1002-2017 ACM/ICPC Asia Regional Shenyang Online
网络赛:2017 ACM/ICPC Asia Regional Shenyang Online 题目来源:cable cable cable Problem Description: Connecti ...
- centos 7 ifconfig 命令找不到
最近在配置linux 环境: 在官网看到centOS除了最新版本7,那就尝试一下吧.最小安装centOS 7之后发现没有ifconfig命令,在网上找了一下都说是路径的路问题. 我用echo $PAT ...
- 统计重复IP并排序
#降序排列 sort ip20180623.log | uniq -c | sort -rn | more #可以输出到文件哦 sort ip20180623.log | uniq -c | sort ...
- Linux基础知识随笔记
linux文件属性 ls -h human-readable以人类可读的形式显示 -i 显示inode号码 [root@oldboyedu55-bjb ~]# ls -ihl total 8.0K 3 ...
- 8-1 python 接口开发(提供数据、返回session_id)
1.接口开发,根据不同查询条件返回数据库查询结果 import flask import tools import json server = flask.Flask(__name__) #新建一个服 ...
- Java基础——对象和类
将包含main方法的类称为主类. 变量的作用域是指变量可以在程序中引用的范围. 实例变量和静态变量的作用域是整个类,无论变量是在哪里声明的. 局部变量的声明和使用都在一个方法的内部. 一个类的实例变量 ...
- Small Talk Matters【闲谈很重要】
Small Talk Matters We' ve all been there: in a lift, in line at the bank or on an airplane, 我们都有过这样的 ...