$(document)选择器
(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。
使用 (document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。
jquery事件 change click bind on input submit事件
用$(document).on('click','#XX',function(){...})为元素添加点击事件 结果导致事件会执行多次
为元素添加点击事件
$(document).on('click','#XX',function(){...})
防止多次执行先清除之前绑定的点击事件
$('#XX').unbind('click').click(function () {
...
});
input方法
$("#input_id").on('input', function(e) {
console.log('input输入时触发', $("#input_id").val());
});
$("#input_id").on('change', function(e) {
console.log('input按下时触发', $("#input_id").val());
});
on方法
向 <p> 元素添加 click 事件处理程序：
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
change方法
当 <input> 字段改变时警报文本：
$("input").change(function(){
alert("文本已被修改");
});
submit事件
$("form").submit(function(e){
alert("Submitted");
});
bind方法
向 <p> 元素添加一个单击事件：
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
click方法
单击 <p> 元素时警报文本：
$("p").click(function(){
alert("段落被点击了。");
});
获取dom元素内容
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取input的值
语法
返回 value 属性：
$(selector).val()
设置 value 属性：
$(selector).val(value)
通过函数设置 value 属性：
$(selector).val(function(index,oldvalue ))
规定返回要设置的值的函数。
index - 可选。接受选择器的 index 位置。
oldvalue - 可选。接受选择器的当前 Value 属性。
返回属性的值 按钮提交完毕使它为禁用状态
$("#submit").attr("disabled", "disabled");
语法
返回属性的值：
$(selector).attr(attribute)
设置属性和值：
$(selector).attr(attribute,value)
使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
$("#txt").attr({
"name": "新修改的属性说",
"age": 25
})
删除img的src属性
$('img').removeAttr('src');
获取 使用 HTTP POST 请求从服务器加载数据：
定义和用法
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)
$("button").click(function(){
$.post("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
数组的每个元素相加reduce方法
最常见的应用一般就是求和以及求乘积了，比如说下面的例子：
let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120
获取输入框后的总和
获取id=book1的值 ('#goods_amount').val(sumtotal)
<body>
<input type="text" value="0" class="btn" id="book1" />
<input type="text" value="0" class="btn" id="book2" />
<input type="text" value="0" class="btn" id="book3" />
<input type="text" value="0" id="goods_amount" />
<script type="text/javascript">
$(function() {
$(".btn").change(function() {
var sum1 = $('#book1').val() * 120
var sum2 = $('#book2').val() * 120
var sum3 = $('#book3').val() * 102
var sumtotal = parseFloat(sum1) + parseFloat(sum2) + parseFloat(sum3);
console.log('总价', sumtotal);
$('#goods_amount').val(sumtotal)
});
});
</script>
</body>
jquery each用法 遍历元素的值index为当前位置，$this当前元素
$("button").click(function() {
$("li").each(function(index) {
console.log(index, $(this).text());
});
});
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
属性选择器
<div id="test2"></div>
$("div[id]") 获取div标签中有id属性的
小结
标签.val(); 获取value属性的值 或者改变value属性的值
$("input").val(); 获取input框的value属性的值 ()为空 代表获取值
$("input").val("hello world!"); 改变input框value属性的值 ()不为空 代表赋值
标签.text(); 获取标签中的文本 或者改变标签中的文本
$('p').text(); 获取p标签中的文本 //呵呵呵呵 ()为空 代表获取文本
$('p').text('哈哈哈'); 改变p标签中的文本 //<p>哈哈哈</p> ()不为空 代表赋值
添加样式
.on{ background:red;}
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
$('ul li:first').addClass('on'); <li class='on'>Hello</li>
$('ul li:first').removeClass('on'); <li>Hello</li>
css ： 标签.css(); 改变/获取标签的值
<p>发给复古风格</p>
$('p').css('color'); //获取p标签中文字的颜色
$('p').css('color','red'); 将p标签的文字颜色改变为红色
$('p').css('background','yellow');
$('p').css('width','200px');
$('p').css('height','300px');
$('p').css({'color':'red','background':'yellow','width':'200px','height':'300px'});
显示隐藏方法带时间参数
标签.toggle(time); 显示/隐藏 toggle 函数中封装了一个判断 自动判断标签是否显示
$('p').hide(1000);
$('p').show(700);
$('p').toggle(500);
网友评论