JavaScript

JavaScript

Posted by 余腾 on 2019-04-16
Estimated Reading Time 3 Minutes
Words 783 In Total
Viewed Times

JavaScript一共有6种数据类型

  • String 字符串
  • Number 数值
  • Boolean 布尔值
  • Null 空值
  • Undefined 未定义
  • Object 对象

String、Number、Boolean、Null、Undefined：基本数据类型
Object：引用数据类型

将JSON字符串转换为js对象
JSON.parse(arr);

将js字符串转换为JSON对象
JSON.stringify(obj`);

强制类型转换

转String

  • String();函数
  • Xxx.toString();

转Number

  • Number();函数
    • 非数字内容，则转换为NaN
    • 空串或者全是空格的字符串，则转换为 0
    • 布尔值 true 1；false 0
    • Null 则转换为 0
    • undefined 则转换为 0
    • 把字符串转为整数：parseInt();parseFloat();

转Boolean

  • Boolean();函数
    • 除了 0和NaN ，其余都是true
    • 除了 空串，其余都是true
    • null，undefined ：false

运算符

运算符(排除自增自减)不会对原变量值更改，除非赋值回去

  • 任何值和NaN 运算，都是NaN
  • 任何值和字符串相加，都会转成字符串拼接

JQuery

传 选择器，
传 dom（Element）
传 标签字符串

1
2
3
4
5
6
$(function(){
	$('#btn').click(function(){
		this.innerHTML;
		$(this).html() 
	})
})

var arr = [2,4,5]

$.each(arr,function(index,item){
console.log(index,item);
})

$.trim();

JQuery对象

1
2
3
4
5
6
7
8
9
10
var $buttons = $('button')
$button.size(),$button.length
$buttons[1].innerHTML,$buttons.get(1).innerHTML


$buttons.each(function(index,domEle){
		console.log(index,domEle.innerHTML);
})

$('#btn3').index()

选择器

基本选择器

1
2
3
4
5
6
$('#div1').css('background','red');//id选择器
$('div').css('background','red');//标签选择器
$('div，span').css('background','red');//标签选择器

$('.box').css('background','blue');//class 选择器
$('div.box').css('background','blue');//class 选择器

层次选择器

1
2
3
4
$('ul span').css('background','blue');//空格 后代
$('ul>span').css('background','blue');//ul下所有的span
$('.box+li').css('background','blue');//+ 紧接在元素后的 next元素
$('ul .box~*').css('background','blue');//~ 紧接在元素后的所有兄弟元素

过滤选择器

1
2
3
4
5
6
7
8
9
$('div:first').css('background','blue');//选择第一个div
$('.box:last').css('background','blue');//选择最后一个div

$('div:not(.box)').css('background','blue');//选择所有class属性不为box的div
$('li:gt(0):lt(2)').css('background','blue');//匹配一个给定索引值的元素 第二个第三个
$('li:contains("BBBB")').css('background','blue');//选择所有class属性不为box的div
$('li:hidden').length//选择隐藏 li
$('li[title]').css('background','blue');//选择有title属性的li元素
$('li[title='hello']').css('background','blue');//选择有title属性为hello的li元素

表单选择器

1
2
3
4
5
6
7
$(':text:disabled').css('background','blue');//选择不可用的文本输入框
$(':checkbox:checked').length();

$(':submit').click(function(){
	var city = $('select>option:selected').html();
	alert(city);
})

工具方法

$.each()：遍历数组或对象中的数据

1
2
3
4
5
6
7
8
9
10
var obj = {
	name:'Tom',
	setName:function(){
		this.name = name;
	}
}

$.each(obj,function(key,value){
	console.log(key,value);
})
1
2
3
$.type(obj)：得到数据的类型。

console.log($.type($));
1
$.isArray(obj)：得到数据的类型。

JSON -JS对象

1
$.parseJSON(json)

JQuery 属性

读取第一个div的title属性
$.(‘div:first’).attr(‘title’);

给所有的div设置name属性Value 为 JQuery
$.(‘div’).attr(‘name’,’JQuery’);

移除所有的div的title属性
$.(‘div’).removeAttr(‘title’);

给所有的div设置class=’JQuery’
$.(‘div’).attr(‘class’,’JQuery’);

给所有的div添加class=’JQuery’
$.(‘div’).addClass(‘JQuery’);

得到输入框中的Value值

1
2
$.(':text').val(); //读取
$.(':text').val('JQuery'); //设置

选中全部的按钮

  • attr()：操作属性值非布尔值的属性
  • prop()：专门操作属性值为布尔值的属性
    1
    2
    3
    4
    var $checkboxs = $(':checkbox')
    $('button:first').click(function(){
    	$checkboxs.prop('checked',true)
    })

感谢阅读

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
JavaScript
FRIENDS
ESC